Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including style-resources-loader with all npm packages installed. Try it out:

require("webpack/package.json"); // webpack is a peer dependency. var styleResourcesLoader = require("style-resources-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

style-resources-loader v1.2.1

CSS processor resources loader for webpack

npm node downloads build coverage

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.

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

NameTypeDefaultDescription
patterns{String \| String[]}/Path to the resources you would like to inject
injector{Function \| 'prepend' \| 'append'}prependControls the resources injection precisely
globOptions{Object}{}An options that can be passed to glob(...)
resolveUrl{Boolean}trueEnable/Disable @import url to be resolved

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

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.

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

It could be asynchronous. You could use async / await syntax in your own injector function.

An injector function receives two parameters:

NameTypeDefaultDescription
source{String}/Content of the source file
resources{Object[]}/Resource descriptors

resources

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

NameTypeDefaultDescription
file{String}/Absolute path to the resource
content{String}/Content of the resource file

globOptions

An 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 file, 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free