如何使用PWA插件构建postcss-nesting
和一个@vue/cli v3
项目?
到目前为止,我已经尝试过
npm install postcss-nesting
然后我创建了一个src/main.css
,其中包含
body {
h1 {
color: green;
}
}
在main.js
文件中,导入css import './main.css';
然后在postcss.config.js
中,我将其添加到插件中(与其他有效的插件一起使用),例如
module.exports = {
plugins: {
'postcss-import': {},
'postcss-nesting': {},
}
}
然后我运行npm run serve
时,CSS不会转换为body h1
,如您所见
使它正常工作的正确方法是什么?
谢谢
答案 0 :(得分:0)
应在package.json
内部启用嵌套,因为vue-cli不会从here中读取postcss.config.js
或.postcssrc.js
的配置。
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-preset-env": {
"browsers": "last 2 versions",
"features": {
"nesting-rules": true,
"custom-media-queries": true,
"color-mod-function": true
}
}
}
},
此存储库上的工作示例:https://github.com/dobladov/vue-cli-example-postcss
对于嵌套来说,使用符号&
<style>
body {
background-color: tomato;
& .foo {
color: purple;
}
}
</style>