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
$ 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 = ;const path = ; moduleexports = plugin: cracoLessResourcesLoader options: patterns: path /* 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 = ;const path = ; moduleexports = plugin: cracoLessResourcesLoader options: patterns: path path /* 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