WebStorm中的PostCSS语法

Question

我想开始在WebStorm中使用PostCSS插件，我想知道如何操作。

我用index.html＆amp;创建了新项目style.css。最后我设置PostCSS方言。 PostCSS插件自动安装。

我写

main{
  height: 400px;
  width: 100%;
  section{
    width: 60%;
    height: 50px;
    border: 2px solid black;
  }
}

并且postcss-nest不起作用。

Answer 1

无法发表评论，没有足够的声誉。您使用的是postcss-cli，WebStorm PostCSS支持插件，还是构建工具（如果是，那么哪一个）？

Answer 2

您可以在“首选项” |“启用”中为.css文件启用PostCSS支持。语言和框架|样式表|方言。

Answer 3

我认为您应该安装postcss-nested。然后，您应该进行配置。我正在vue项目中使用postCSS，这是我自己的解决方案。

1. npm install postcss-nested@4.2.3

2. 在主目录中创建一个postcss.config.js文件，并添加以下行。

module.exports = {
plugins: {'postcss-nested': {}}
}

它应该工作清楚。

.main{
  height: 400px;
  width: 100%;
  &-section{
      width: 60%;
      height: 50px;
      border: 2px solid black;
  }
}