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
$ yarn add -D craco-plugin-style-resources-loader
# OR
$ 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:
const cracoPluginStyleResourcesLoader = require('craco-plugin-style-resources-loader');
const path = require('path');
module.exports = {
plugin: cracoLessResourcesLoader,
options: {
patterns: path.join(__dirname, 'src/less/common.less'),
/*
Please enter supported CSS processor type
1. if u use css processor，please type css string
2. if u use less processor，please type less string
3. if u use sass or scss processor，please type sass or scss string，Choose one of the two
4. if u use stylus processor，please type stylus string
*/
styleType: 'less'
}
};
You can load multiple scss/sass/css/less resources files too:
const cracoPluginStyleResourcesLoader = require('craco-plugin-style-resources-loader');
const path = require('path');
module.exports = {
plugin: cracoLessResourcesLoader,
options: {
patterns: [
path.join(__dirname, 'src/less/common.less'),
path.join(__dirname, 'src/less/global.less')
],
/*
Please enter supported CSS processor type
1. if u use css processor，please type css string
2. if u use less processor，please type less string
3. if u use sass or scss processor，please type sass or scss string，Choose one of the two
4. if u use stylus processor，please type stylus string
*/
styleType: 'less'
}
};
Learn more about the configuration of options ，Please click on the link 👉 style-resources-loader
