Have ideas to improve npm?Join in the discussion! »

    style-resources-loader
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    npm node downloads build coverage 996.icu

    Style Resources Loader

    CSS processor resources loader for webpack.

    Install

    npm i style-resources-loader -D

    Usage

    This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. variables, mixins) into multiple imported css, sass, scss, less, stylus modules.

    It's mainly used to

    • share your variables, mixins, functions across all style files, so you don't need to @import them manually.
    • override variables in style files provided by other libraries (e.g. ant-design) and customize your own theme.

    Usage with Vue CLI

    See automatic imports for more details.

    Examples

    Prepends variables and mixins to all scss files with default resources injector.

    webpack.config.js

    module.exports = {
        // ...
        module: {
            rules: [{
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader', {
                    loader: 'style-resources-loader',
                    options: {
                        patterns: [
                            './path/from/context/to/scss/variables/*.scss',
                            './path/from/context/to/scss/mixins/*.scss',
                        ]
                    }
                }]
            }]
        },
        // ...
    }

    Appends variables to all less files and overrides original less variables.

    webpack.config.js

    module.exports = {
        // ...
        module: {
            rules: [{
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader', {
                    loader: 'style-resources-loader',
                    options: {
                        patterns: path.resolve(__dirname, 'path/to/less/variables/*.less'),
                        injector: 'append'
                    }
                }]
            }]
        },
        // ...
    }

    Prepends variables and mixins to all stylus files with customized resources injector.

    webpack.config.js

    module.exports = {
        // ...
        module: {
            rules: [{
                test: /\.styl$/,
                use: ['style-loader', 'css-loader', 'stylus-loader', {
                    loader: 'style-resources-loader',
                    options: {
                        patterns: [
                            path.resolve(__dirname, 'path/to/stylus/variables/*.styl'),
                            path.resolve(__dirname, 'path/to/stylus/mixins/*.styl')
                        ],
                        injector: (source, resources) => {
                            const combineAll = type => resources
                                .filter(({ file }) => file.includes(type))
                                .map(({ content }) => content)
                                .join('');
     
                            return combineAll('variables') + combineAll('mixins') + source;
                        }
                    }
                }]
            }]
        },
        // ...
    }

    Options

    Name Type Default Description
    patterns {string \| string[]} / Path to the resources you would like to inject
    injector {Function \| 'prepend' \| 'append'} 'prepend' Controls the resources injection precisely
    globOptions {Object} {} An options that can be passed to glob(...)
    resolveUrl {boolean} true Enable/Disable @import url to be resolved

    See the type definition file for more details.

    patterns

    A string or an array of string, which represents the path to the resources you would like to inject. If the path is relative, it would relative to webpack context.

    It supports globbing. You could include many files using a file mask.

    For example, './styles/*/*.less' would include all less files from variables and mixins directories and ignore reset.less in such following structure.

    ./src  <-- webpack context
      /styles
        /variables
          |-- fonts.less
          |-- colors.less
        /mixins
          |-- size.less
        |-- reset.less
    

    Only supports .css .sass .scss .less .styl as resources file extensions.

    injector

    An optional function which controls the resources injection precisely. It also supports 'prepend' and 'append' for convenience, which means the loader will prepend or append all resources to source files, respectively.

    It defaults to 'prepend', which implements as an injector function internally.

    Furthermore, an injector function should match the following type signature:

    (source: string, resources: StyleResource[]) => string | Promise<string>

    It receives two parameters:

    Name Type Default Description
    source {string} / Content of the source file
    resources {StyleResource[]} / Resource descriptors

    resources

    An array of resource descriptor, each contains file and content properties:

    Name Type Default Description
    file {string} / Absolute path to the resource
    content {string} / Content of the resource file

    It can be asynchronous. You could use async / await syntax in your own injector function or just return a promise.

    globOptions

    Options that can be passed to glob(...). See node-glob options for more details.

    resolveUrl

    A boolean which defaults to true. It represents whether the relative path in @import or @require statements should be resolved.

    If you were to use @import or @require statements in style resource files, you should make sure that the URL is relative to that resource file, rather than the source file.

    You could disable this feature by setting resolveUrl to false.

    License

    MIT

    Install

    npm i style-resources-loader

    DownloadsWeekly Downloads

    378,129

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    47.3 kB

    Total Files

    65

    Last publish

    Collaborators

    • avatar