css-unit-transform-loader v1.0.2

css-unit-transform-loader

description/描述

      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单位的转换。

install/安装

npm i css-unit-transform-loader -D

or(或者)

npm install --save-dev css-unit-transform-loader

usage/使用

index.js

import './index.css';

webpack.config.js

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.
注意:以上使用到的插件请自行安装

options