craco-plugin-style-resources-loader 🤡

If you want to automatically import files (for colors, variables, mixins...) in you project, you can use the craco-plugin-style-resources-loader . in fact introduce css global variables is useful in you project.

This is a craco plugin to add Style Resources Loader with create-react-app version >= 2.

Inspired by: craco-sass-resources-loader 、 craco-style-resources-loader and vue-cli Working with CSS

Introduction

Add style-resources-loader to your react project easier.

Installation

1$ yarn add -D craco-plugin-style-resources-loader
2
3# OR
4
5$ npm install craco-plugin-style-resources-loader --save-dev

Usage

craco-plugin-style-resources-loader expect a resources option containing a string or an array of string pointing the scss/sass/css/less files your want to load before any scss/sass/css/less file.

Examples

e.g. use less processor

If you only use one less resources file，in craco.config.js file, you need to use this:

1const cracoPluginStyleResourcesLoader = require('craco-plugin-style-resources-loader');
2const path = require('path');
3
4module.exports = {
5    plugin: cracoLessResourcesLoader,
6    options: {
7        patterns: path.join(__dirname, 'src/less/common.less'),
8        /* 
9            Please enter supported CSS processor type
10            1. if u use css processor，please type css string
11            2. if u use less processor，please type less string
12            3. if u use sass or scss processor，please type sass or scss string，Choose one of the two
13            4. if u use stylus processor，please type stylus string
14        */
15        styleType: 'less'
16    }
17};

You can load multiple scss/sass/css/less resources files too:

1const cracoPluginStyleResourcesLoader = require('craco-plugin-style-resources-loader');
2const path = require('path');
3
4module.exports = {
5    plugin: cracoLessResourcesLoader,
6    options: {
7        patterns: [
8			path.join(__dirname, 'src/less/common.less'),
9			path.join(__dirname, 'src/less/global.less')
10		],
11        /* 
12            Please enter supported CSS processor type
13            1. if u use css processor，please type css string
14            2. if u use less processor，please type less string
15            3. if u use sass or scss processor，please type sass or scss string，Choose one of the two
16            4. if u use stylus processor，please type stylus string
17        */
18        styleType: 'less'
19    }
20};

Learn more about the configuration of options ，Please click on the link 👉 style-resources-loader