是时候使用PostCss了
前言
css的预处理器相信不少人用过,比如less,sass。因为之前一直用vue开发,也知道了styuls,但是后来出于各种考虑使用了sass,但事实上工作中,sass用的比较少是因为全写原生了。。。然后就有个考虑是不是应该换个”全”处理器来针对业务开发进行适配,于是postcss的出现解决了一切问题。
正文
根据大漠w3cplus的系列教程,抽一部分觉得需要的内容。
Autoprefixer是每一个项目都必须使用的工具
Autoprefixer可以根据你的配置为你需要的浏览器添加私有前缀
如果项目中使用动画,可以考虑使用postcss-will-change
如果需要支持IE8,考虑使用postcss-color-rgba-fallback、postcss-opacity、postcss-pseudoelements和postcss-vmin等插件
如果需要支持IE8、IE9和IE10,可以考虑使用node-pixrem插件
然后我们来看如何在我们之前的项目中添加postcss而不需要更改其它的内容。
首先就是安装postcss
npm install postcss
npm install precss
值得注意的是你如果想用autoprefixer插件还需要安装
npm install caniuse-db
之后直接在原来项目的webpack中修改如下代码:
module: {
loaders: [
{
test: /\.vue$/,
loader: "vue"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},
{
test: /\.(png|jpg)$/,
loader: "url-loader?mimetype=image/png"
},
{
test: /\.json$/,
loader: "json"
}
],
postcss: function () {
return [autoprefixer, precss];
}
},
然后你就能用上Postcss了-0-。
结尾
最后我折腾了蛮久发现我其实还是在写原生来着。。。泪目QAQ