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
Name | Type | Default | Description |
---|
patterns | {String | String[]} | / | Path to the resources you would like to inject |
injector | {Function | 'prepend' | 'append'} | prepend | Controls the resources injection precisely |
globOptions | {Object} | {} | An options that can be passed to glob(...) |
resolveUrl | {Boolean} | true | Enable/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:
Name | Type | Default | Description |
---|
source | {String} | / | Content of the source file |
resources | {Object[]} | / | Resource descriptors |
resources
An array of resource, each contains file
and content
property:
Name | Type | Default | Description |
---|
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