https://github.com/kingvid-chan/css-id-replace-loader
Another solution to CSS Module
https://github.com/kingvid-chan/css-id-replace-loader
css-modules loader webpack
Last synced: 10 months ago
JSON representation
Another solution to CSS Module
- Host: GitHub
- URL: https://github.com/kingvid-chan/css-id-replace-loader
- Owner: kingvid-chan
- Created: 2016-12-30T12:43:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-23T14:47:06.000Z (almost 9 years ago)
- Last Synced: 2024-04-27T09:29:17.918Z (over 1 year ago)
- Topics: css-modules, loader, webpack
- Language: JavaScript
- Homepage:
- Size: 340 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Css-Id-Replace Loader
Another solution to CSS Module
安装
```bash
npm i -D cssidreplace-loader
```
前言
讲一下我司的另一种css模块化解决方案，给每个模块自定义一个css key，比如说`customHeader`，在该模块的所有css样式签名都套上.customHeader
e.g.这是模块html文件
```html
this is header
css模块化解决方案
```
以下是该模块css代码
```css
.customHeader header{
width: 990px;
margin: 10px auto;
}
.customHeader h1{
font-style: italic;
}
.customHeader p{
color: #ccc;
}
```
webpack打包的时候给该模块css key添加一个随机唯一的数值生成最终的cssId，e.g.customHeader-123456，生成最终文件代码如下：
```html
.customHeader-123456 header{
width: 990px;
margin: 10px auto;
}
.customHeader-123456 h1{
font-style: italic;
}
.customHeader-123456 p{
color: #ccc;
}
this is header
css模块化解决方案
```
用法
cssidreplace-loader的作用就是在webpack打包时把css代码中的css key替换成css Id（即是把customHeader替换成customHeader-123456）。
可配置参数有两个：`regex`和`sub`，`regex`指待替换css key，`sub`指css Id，在webpack配置文件中代码如下：
```js
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'cssidreplace-loader',
options: {
regex: 'customHeader',
sub: 'customHeader-123456'
}
}
]
}
```
每个模块的css Id都是不同的，咱们可以通过通过动态配置webpack给对应的模块替换上相应的css Id
```js
// 注意：默认模块名称跟模块文件夹名称是一致的
// var modulesMap = [ // 举例，假设这个是所有模块的索引
// {
// name: 'header', // 模块名称
// cssKey: 'customHeader',
// cssId: 'customHeader-123456'
// },
// {
// name: 'footer',
// cssKey: 'customFooter',
// cssId: 'customFooter-323122'
// },
// ];
const webpack = require('webpack');
const webpack_config = require('./webpack.config');
const webpackDevServer = require('webpack-dev-server');
modulesMap.forEach((module) => {
webpack_config.module.rules.unshift({
test: eval("/\.css$/i"),
include: eval(module.name),
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'cssidreplace-loader',
options: {
regex: module.cssKey,
sub: module.cssId
}
}
]
});
});
//webpack dev server
const compiler = webpack(webpack_config);
new webpackDevServer(compiler, {
stats: {
colors: true,
chunks: false
},
noInfo: false,
proxy: {
'*': {
target: 'http://localhost:3000',
}
}
}).listen(8080, function(){console.log('App (dev) is now running on port 8080!');});
```