craco-plugin-style-resources-loader

    0.0.3 • Public • Published

    craco-plugin-style-resources-loader 🤡

    banner

    MIT License npm version download minified 
GitHub issues GitHub forks GitHub stars

    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-loadercraco-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

    Install

    npm i craco-plugin-style-resources-loader

    DownloadsWeekly Downloads

    17

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    58.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • condorhero