A loader for webpack that allows writing global css without :global {}
.
To begin, you'll need to install cssmodule-without-global-loader
:
$ npm install cssmodule-without-global-loader --save-dev
Then add the loader to your webpack
config. For example:
webpack.config.js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.module\.less$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'cssmodule-without-global-loader',
options: {
prefix: 'ant-',
pattern: /__.{5}/g
}
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]__[hash:base64:5]'
}
}
}
},
],
},
};
Before use
:global {
ant-input: {
}
}
After use
ant-input: {
}
And run webpack
via your preferred method.
Name | Type | Required | Description |
---|---|---|---|
prefix |
{string} |
yes | the third party css prefix, such as ant- for antd, el- for element-ui |
pattern |
{object} |
yes | the RegExp depends on localIdentName of css-loader |