postcss 2017/12/16

less转成acss，做支付宝小程序再也不用手动改样式啦（postcss,extract-text-webpack-plugin）

接到当前项目转成支付宝小程序的需求，你有没有这样做过？把原来的项目的样式（less，或者其他）拷贝到acss（支付宝小程序的样式），然后按支付宝小程序的规则把px转成rpx

其实这个拷贝修改的过程，可以变成自动转换的哦

extract-text-webpack-plugin该插件的主要是为了抽离css样式

postcss 把 CSS 解析成抽象语法树（AST）

首先在webpack的配置文件里面引入extract-text-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLESS = new ExtractTextPlugin('output.css');

module.exports = {
    entry: './entry.js', //入口文件
    output: {
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
        path: __dirname, //输出位置
        filename: 'output.js' //输入文件
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                    // options: {
                    //     sourceMap: true
                    // }
                    }, {
                        loader: "less-loader"
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => {
                                return [
                                    require("./myplugin.js")
                                ]
                            }
                        }
                    }
                    ],
                    publicPath: __dirname
                })
            }
        ]
    },
    //其他解决方案配置
    resolve: {
        extensions: ['.js', '.json', '.css', '.less'] //添加在此的后缀所对应的文件可以省略后缀
    },
    //插件
    plugins: [
        extractLESS
    ]
}

然后基于postcss写一个小插件，用来进行单位转换，就是把px转成rpx （如果项目进行了适配，输出的是rem，需要重新计算，根据适配前的规则）

1
2
3
4
5
6
7
8
9
10
var postcss = require('postcss');
module.exports = postcss.plugin('myplugin', function myplugin(options) {
    return function(css) {
        css.replaceValues(/\d+px/, {
            fast: 'px'
        }, string => {
            return parseInt(parseFloat(string)) + 'rpx';
        });
    }
});

最后我们看看打包出来的效果

index.less(打包之前)
1
2
3
4
5
6
7
8
.a{
	color:#fff;
	width:20px;
	.b{
		color:#333;
		width:30px;
	}
}
打包之后
1
2
3
4
5
6
7
8
.a {
  color: #fff;
  width: 20rpx;
}
.a .b {
  color: #333;
  width: 30rpx;
}

项目地址：

https://github.com/Uking2016/testPostcss