Socket
Socket
Sign inDemoInstall

style-resources-loader

Package Overview
Dependencies
93
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-resources-loader

CSS processor resources loader for webpack


Version published
Maintainers
1
Weekly downloads
262,038
decreased by-6.77%

Weekly downloads

Readme

Source

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

NameTypeDefaultDescription
patternsstring | string[]/Path to the resources you would like to inject
injectorInjector | 'prepend' | 'append''prepend'Controls the resources injection precisely
globOptionsGlobOptions{}An options that can be passed to glob(...)
resolveUrlbooleantrueEnable/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:

NameTypeDescription
sourcestringContent of the source file
resourcesStyleResource[]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:

NameTypeDescription
filestringAbsolute path to the resource
contentstringContent 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

Keywords

FAQs

Last updated on 08 Dec 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc