Package Exports

style-resources-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (style-resources-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

style-resources-loader

This loader is a CSS preprocessor resources loader for webpack, which inject your resources into multiple sass / scss / less 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.

Example

Prepend variables and mixins to all scss files.

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader', {
        loader: 'style-resources-loader',
        options: {
            resources: [
                'path/to/scss/variables/*.scss',
                'path/to/scss/mixins/*.scss'
            ]
        }
    }]
}

Append variables to all less files, override original less variables.

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader', {
        loader: 'style-resources-loader',
        options: {
            resources: 'path/to/less/variables/*.less'
            injector: 'append'
        }
    }]
}

Installation

npm i style-resources-loader -D

Documentation

Loader Options

Name	Type	Default	Description
`resources`	`{string \| string[]}`	`/`	Path to resources.
`injector`	`{'prepend' \| 'append' \| (source: string, resource: string) => string}`	`'prepend'`	Indicate how the loader inject resources. You can write your own injector and control the resource injection precisely.