style-resources-loader

What is style-resources-loader?

The style-resources-loader npm package is a webpack loader that injects shared style resources (such as variables, mixins, and functions) into every style file processed by webpack. This is particularly useful for projects using CSS preprocessors like Sass, Less, or Stylus, as it allows you to avoid repetitive imports and ensures that all style files have access to the same set of resources.

What are style-resources-loader's main functionalities?

Injecting Shared Resources

This feature allows you to inject shared style resources into every SCSS file processed by webpack. The example demonstrates how to configure webpack to use style-resources-loader to inject variables and mixins from specified SCSS files.

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'style-resources-loader',
            options: {
              patterns: [
                path.resolve(__dirname, 'src/styles/variables.scss'),
                path.resolve(__dirname, 'src/styles/mixins.scss')
              ]
            }
          }
        ]
      }
    ]
  }
}

Support for Multiple Preprocessors

This feature demonstrates the flexibility of style-resources-loader in supporting multiple CSS preprocessors. The example shows how to configure webpack to inject shared resources for SCSS, Less, and Stylus files.

{
  module: {
    rules: [
      {
        test: /\.(scss|sass|less|styl)$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'style-resources-loader',
            options: {
              patterns: [
                path.resolve(__dirname, 'src/styles/resources.scss'),
                path.resolve(__dirname, 'src/styles/resources.less'),
                path.resolve(__dirname, 'src/styles/resources.styl')
              ]
            }
          }
        ]
      }
    ]
  }
}

Other packages similar to style-resources-loader

sass-resources-loader

sass-resources-loader is a webpack loader that works similarly to style-resources-loader but is specifically designed for Sass/SCSS. It allows you to inject shared resources like variables, mixins, and functions into every Sass/SCSS file processed by webpack. Compared to style-resources-loader, it is more focused and does not support other preprocessors like Less or Stylus.

less-loader

less-loader is a webpack loader for compiling Less files. While it does not directly inject shared resources, it allows you to configure global variables and mixins through the `globalVars` and `modifyVars` options. This makes it somewhat comparable to style-resources-loader for Less projects, but it lacks the multi-preprocessor support.

stylus-loader

stylus-loader is a webpack loader for compiling Stylus files. Similar to less-loader, it does not directly inject shared resources but allows you to configure global variables and mixins through the `import` option. This makes it a comparable tool for Stylus projects, but it does not offer the same level of multi-preprocessor support as style-resources-loader.

README

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	Injector | 'prepend' | 'append'	'prepend'	Controls the resources injection precisely
globOptions	GlobOptions	{}	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:

type Injector = (
    this: LoaderContext,
    source: string,
    resources: StyleResource[],
) => string | Promise<string>

It receives two parameters:

Name	Type	Description
source	string	Content of the source file
resources	StyleResource[]	Resource descriptors

It is called with this context pointing to the loader context.

resources

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

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

Changelog

1.5.0 (December 8, 2021)

• Injector function is called with this context pointing to the loader context.