Style Resources Loader

CSS processor resources loader for webpack
Alternatives To Style Resources Loader
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
15 hours ago372mitJavaScript
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Tabler33,5541653 days ago16April 04, 201955mitHTML
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Hover27,440356244 months ago9June 11, 201840otherSCSS
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Css11,934484917 hours ago2,742September 23, 202212mitSCSS
The CSS design system that powers GitHub
Bourbon9,1012,9343482 months ago32February 22, 20224mitRuby
A Lightweight Sass Tool Set
Node Sass8,344270,50165,8355 days ago150September 08, 2022171mitC++
:rainbow: Node.js bindings to libsass
Hamburgers6,838317602 months ago20March 15, 202231mitSCSS
Tasty CSS-animated Hamburgers
Open Color4,91533574a month ago18August 17, 202118mitHandlebars
Color scheme for UI design.
Csshake4,634507a year ago5May 03, 20221mitSCSS
CSS classes to move your DOM!
Neat4,5721,070953 years ago14July 10, 2019mitRuby
[no longer maintained]
Alternatives To Style Resources Loader
Select To Compare

Alternative Project Comparisons

npm node downloads build coverage

Style Resources Loader

CSS processor resources loader for webpack.


npm i style-resources-loader -D


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.


Prepends variables and mixins to all scss files with default resources injector.


module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
    // ...

Appends variables to all less files and overrides original less variables.


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.


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)

                        return combineAll('variables') + combineAll('mixins') + source;
    // ...


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.


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
      |-- fonts.less
      |-- colors.less
      |-- size.less
    |-- reset.less

Only supports .css .sass .scss .less .styl as resources file extensions.


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.


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.


Options that can be passed to glob(...). See node-glob options for more details.


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.



Popular Scss Projects
Popular Sass Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.