用户可自定义规则进行css属性值转换的webpack Loader，您可以传入规则，对css属性值进行个性化转换。
npm install --save-dev css-value-loaderwebpack.config.js
cssunit-loader输入的是css文件，如使用sass/less等预处理语言，需先使用sass-loader/less-loader进行转换
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {},
},
],
},
],
},
};| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
unit |
{String} | 'px' | 需要转化的css单位 |
rule |
{Function} | 见下 | 自定义转化规则函数 |
exceptSelect |
{String} | '.except' | 在转化时忽略的css类 |
exceptProperty |
{String} | 'background' | 如css属性名包含此字符串，则不进行转化 |
exceptText |
{String} | '--doc-scale' | 如css值包含此字符串，则不进行转化 |
类型: String
默认值: 'px'
可自定义需要转化的css单位，包括但不限于px、rem。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {
unit: 'rem',
},
},
],
},
],
},
};类型: Function
默认值：
(value) => {
return `calc(${value}px * var(--doc-scale))`;
}自定义转化规则函数，用户可随意定义，传入一个函数，参数为匹配的属性值数字部分，需return一个结果。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {
// value 即是匹配的属性值数字部分，比如10px，value代表的是10
rule: (value) => {
return `calc(${value}px * var(--doc-scale))`;
},
},
},
],
},
],
},
};// 转化前
.main{
width: 38px;
}
//转化后
.main{
width: calc(38px * var(--doc-scale));
}类型: String
默认值: '.except'
在进行转化时，如果css中含有这个选择器，则不进行替换。用户可自定义，为保证匹配准确性，此类名后必须是如下形式。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {
exceptSelect: '.except',
},
},
],
},
],
},
};// 转化前
.except.main{ // .expect必须紧跟.
width: 10px;
}
//转化后
.except.main{
width: 10px;
}类型: String
默认值: 'background'
在进行转化时，如果css属性名中含有此字符，则不进行替换，用户可自定义，具体可看示例。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {
exceptProperty: 'background',
},
},
],
},
],
},
};// 转化前，属性名只要包含'background'就不转化
.main{
background: url('');
background-size: 100% 100%;
background-position: 100px 100px;
}
//转化后
.main{
background: url('');
background-size: 100% 100%;
background-position: 100px 100px;
}类型: String
默认值: '--doc-scale'
在进行转化时，如果css属性值中含有此字符，则不进行替换，用户可自定义，具体可看示例。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'css-value-loader',
options: {
unit: '--doc-scale',
},
},
],
},
],
},
};// 转化前，属性值只要包含'--doc-scale'就不转化
.main{
width: calc(38px * var(--doc-scale));
}
//转化后
.main{
width: calc(38px * var(--doc-scale));
}如果不希望对结果进行转化，可参照如下操作，此为本loader内置属性，暂不可自定义。
// 转化前，属性值用单引号包裹，转化后输出不带单引号部分
.main{
width: '38px';
}
//转化后
.main{
width: 38px;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent