Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
style-resources-loader
Advanced tools
CSS processor resources loader for webpack
Weekly downloads
Readme
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
variables, mixins, functions
across all style files, so you don't need to @import
them manually.variables
in style files provided by other libraries (e.g. ant-design) and customize your own theme.See automatic imports for more details.
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;
}
}
}]
}]
},
// ...
}
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
.
FAQs
CSS processor resources loader for webpack
The npm package style-resources-loader receives a total of 216,721 weekly downloads. As such, style-resources-loader popularity was classified as popular.
We found that style-resources-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.