如何使postcss嵌套和@ vue / cli pwa工作?

时间:2018-12-16 12:58:29

标签: postcss vue-cli-3 postcss-nesting

如何使用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,如您所见

chrome dev tools

使它正常工作的正确方法是什么?

谢谢

1 个答案:

答案 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>