如何vue-cli2.x以及vue-cli3.x中怎么使用postcss
使用vue-cli脚手架新建了一个以webpack模版的项目,想在单组件的项目中使用postcss书写css。1、安装npm install postcss-cssnext postcss-import postcss-loader -S2、如果已经安装postcss(npm install postcss -S)有坑,需要一大堆loader配置,这时项目根目录会生成“.postcssr...
·
使用vue-cli脚手架新建了一个以webpack模版的项目,想在单组件的项目中使用postcss书写css。
1、安装
npm install postcss-cssnext postcss-import postcss-loader -S
2、如果已经安装postcss(npm install postcss -S)有坑,需要一大堆loader配置,这时项目根目录会生成“.postcssrc.js”文件
没有就新建一个".postcssrc.js"(vue-cli3.x中不需要也不会产生此文件直接跳过)。
//.postcssrc.js
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-cssnext": {}
}
}
3、在组建中使用
<style lang="postcss" scoped>
</style>
以上是在vue-cli2.x,最近使用vue-cli 3.x发现嵌套语法不起作用,最终找到解决办法:
在package.json中增加如下代码
"postcss": {
"plugins": {
"autoprefixer": {},
//此处为新增解决嵌套语法不起作用
"postcss-cssnext": {}
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)