Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhuix/style-resources-loader
CSS processor resources loader for webpack
https://github.com/jhuix/style-resources-loader
css less loader resources sass scss style style-resources-loader stylus webpack
Last synced: 4 months ago
JSON representation
CSS processor resources loader for webpack
- Host: GitHub
- URL: https://github.com/jhuix/style-resources-loader
- Owner: jhuix
- License: other
- Fork: true (yenshih/style-resources-loader)
- Created: 2019-12-17T04:03:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-23T03:04:45.000Z (about 5 years ago)
- Last Synced: 2024-09-25T19:41:34.507Z (4 months ago)
- Topics: css, less, loader, resources, sass, scss, style, style-resources-loader, stylus, webpack
- Language: TypeScript
- Homepage:
- Size: 446 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![downloads][downloads]][downloads-url]
[![build][build]][build-url]
[![coverage][coverage]][coverage-url]
[![996.icu][996.icu]][996.icu-url]
@jhuix/style-resources-loader
CSS processor resources loader for webpack.
This [@jhuix/style-resources-loader](https://github.com/jhuix/style-resources-loader) is based on [style-resources-loader](https://github.com/yenshih/style-resources-loader), which extends [`test`](#test) option.
Install
```bash
npm i @jhuix/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](https://github.com/ant-design/ant-design)) and customize your own theme.
### Usage with Vue CLI
See [automatic imports](https://cli.vuejs.org/guide/css.html#automatic-imports) for more details.
Examples
Prepends `variables` and `mixins` to all `scss` files with default resources injector.
**webpack.config.js**
``` js
module.exports = {
// ...
module: {
rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader', {
loader: '@jhuix/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**
```js
module.exports = {
// ...
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader', {
loader: '@jhuix/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**
``` js
module.exports = {
// ...
module: {
rules: [{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader', {
loader: '@jhuix/style-resources-loader',
options: {
test:/main/
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|
|:--:|:--:|:-----:|:----------|
|**[`test`](#test)**|`{string \| RegExp \| Function}`|`''`|Match and Filter resource file|
|**[`patterns`](#patterns)**|`{string \| string[]}`|`/`|Path to the resources you would like to inject|
|**[`injector`](#injector)**|`{Function \| 'prepend' \| 'append'}`|`'prepend'`|Controls the resources injection precisely|
|**[`globOptions`](#globoptions)**|`{Object}`|`{}`|An options that can be passed to `glob(...)`|
|**[`resolveUrl`](#resolveurl)**|`{boolean}`|`true`|Enable/Disable `@import` url to be resolved|
See [the type definition file](https://github.com/jhuix/style-resources-loader/blob/master/src/types.ts) for more details.
### `test`
An optional function which filter the resources file with the filename.
It defaults to a empty string, which implements without filter any files.
Furthermore, an `test` type should match the following type signature:
- String:
```ts
"css"
```
- RegExp:
```ts
/\.vue$/
```
- Function:
```ts
(filename: string) => boolean
```
### `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](https://webpack.js.org/configuration/entry-context/).
It supports [globbing](https://github.com/isaacs/node-glob). 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:
```ts
(source: string, resources: StyleResource[]) => string | Promise
```
It receives two parameters:
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`source`**|`{string}`|`/`|Content of the source file|
|**[`resources`](#resources)**|`{StyleResource[]}`|`/`|Resource descriptors|
#### `resources`
An array of resource descriptor, each contains `file` and `content` properties:
|Name|Type|Default|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](https://github.com/isaacs/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](http://www.opensource.org/licenses/mit-license.php)
[npm]: https://img.shields.io/npm/v/@jhuix/style-resources-loader.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@jhuix/style-resources-loader
[node]: https://img.shields.io/node/v/@jhuix/style-resources-loader.svg
[node-url]: https://nodejs.org
[downloads]: https://img.shields.io/npm/dm/@jhuix/style-resources-loader.svg?style=flat-square
[downloads-url]: https://www.npmjs.com/package/@jhuix/style-resources-loader
[build]: https://img.shields.io/travis/jhuix/style-resources-loader/master.svg?style=flat-square
[build-url]: https://travis-ci.org/jhuix/style-resources-loader
[coverage]: https://img.shields.io/coveralls/jhuix/style-resources-loader/master.svg?style=flat
[coverage-url]: https://coveralls.io/github/jhuix/style-resources-loader?branch=master
[996.icu]: https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg?style=flat-square
[996.icu-url]: https://996.icu/#/en_US