在vue-cli项目中,使用precss
1、npm 安装:
npm install precss
根据需要还可以一同安装postcss-functions、autoprefixer
2、修改build/vue-loader.conf.js
const precss = require('precss')
const autoprefixer = require('autoprefixer')
module.exports = {
// 以前写好的选项...
postcss: {
plugins: [precss, autoprefixer]// 这里是postcss的插件列表
}
}
3、检查下webpack.base.conf.js对于.vue的options是不是引用的build/vue-loader.conf.js
module: {
rules: [
// 以前写好的选项...
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
}
4、在.vue文件里面的<style>
可以这样写:
<style lang="postcss" type="text/css" rel="stylesheet/postcss">
5、即可。
一些坑:
1/
precss没有计算表达式的功能
如:width: (9/326)px; 会报错
2/如果vue-loader的版本没有13.3.0,那么会报错:
after.after is not a function