style-resources-loader

Style Resources Loader

CSS preprocessor resources loader for webpack.

Install

npm i style-resources-loader -D

Usage

This loader is a CSS preprocessor resources loader for webpack, which injects your style resources (e.g. variables / mixins) into multiple sass / scss / less / stylus files.

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.

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.resolve(__dirname, 'path/to/scss/variables/*.scss'),
                        path.resolve(__dirname, 'path/to/scss/mixins/*.scss'),
                    ]
                }
            }]
        }]
    }
}

Appends variables to all less files and override 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: (source, resources) => source + resources.map(({ content }) => content).join('')
                }
            }]
        }]
    }
}

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

webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            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('mixins') + source + combineAll('variables');
                    }
                }
            }]
        }]
    }
}

Options

patterns

A string or an array of string, represents the path to the resources you would like to inject.

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

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

./styles
  /variables
    |-- fonts.less
    |-- colors.less
  /mixins
    |-- size.less
  |-- reset.less

injector

An optional function which controls the resources injection precisely.

It receives two parameters:

resources

An array of resource, each contains file and content property:

It defaults to (source, resources) => resources.map(({ content }) => content).join('') + source, which means the loader prepends all resources to source file.

resolveUrl

A boolean which defaults to true, represents the relative path in @import or @require statements will have been resolved correctly.

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

You could disable this feature by setting resolveUrl to false.

License

MIT