In the development of mobile terminals, it is often necessary to convert the px units accordingly. Pure manual calculation is very time-consuming and labor-intensive. Perhaps you have used the plugin "cssrem" which is automatically converted from px to rem units developed by a Taobao Daxie in the sublime editor.But it is a modification on the source file, which is an irreversible process. Imagine, if you need to know the px unit size of an element at a time, how do you do it? You may need to multiply the previously converted rem unit by the previous conversion factor to get the original px size. It is a painful process.
Then, the function of this tool is to realize the conversion of css units without modifying the source file through the configuration of webpack.
在移动端的开发中,往往需要对px单位进行相应的转换。纯粹的手工计算是很耗时耗力的。或许你使用过sublime编辑器中某淘宝大佬开发的px到rem单位自动转换的插件“cssrem”。但它是在源文件上面的修改,也就是说是一种不可逆的过程。试想一下,如果你某时需要知道某个元素的px单位大小的时候你该如何去做?这时你可能需要把之前转换好的rem单位乘以之前的转换系数得到原来的px大小,这将是一个痛苦的过程。
那么,本工具的作用就是通过webpack的配置在不修改源文件的前提下,实现对css单位的转换。
npm i css-unit-transform-loader -D
or(或者)
npm install --save-dev css-unit-transform-loader
import './index.css';
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ["css-loader", {
loader: 'css-unit-transform-loader',
options: {
tranScale: 100,
unitBefore: 'px',
unitAfter: 'rem',
isTranFont: false
}
}]
})
}]
}
}
eg:The above configuration is to convert the css unit according to the ratio of 1rem=100px.
示意:如上配置即为按照1rem=100px的比例对css单位进行转换
Note: Please install the plugin used above.
注意:以上使用到的插件请自行安装
name | type | default | description |
---|---|---|---|
tranScale | Number | 100 | Unit conversion ratio(单位转换比例) |
unitBefore | String | px | Pre-conversion unit(转换前单位) |
unitAfter | String | rem | Converted unit(转换后单位) |
isTranFont | Boolean | false | Whether to convert font units(是否转换字体单位) |