是时候使用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

Table of Contents