WebStorm 中的 PostCSS 语法答案

【问题标题】：PostCSS syntax in WebStormWebStorm 中的 PostCSS 语法
【发布时间】：2018-07-14 18:11:51
【问题描述】：

我想开始在 WebStorm 中使用 PostCSS 插件，我想知道怎么做。

我已经使用index.html 和style.css 创建了新项目。最后我设置了 PostCSS 方言。 PostCSS 插件自动安装。

我写

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

而 postcss-nest 不起作用。

【问题讨论】：

【解决方案1】：

您可以在 Preferences | 中为您的 .css 文件启用 PostCSS 支持。语言和框架 |样式表 |方言。

【讨论】：

【解决方案2】：

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

【讨论】：

WebStorm PostCSS 支持插件
@MaximYazykov 你能确定设置方言没有问题吗？将文件扩展名更改为.pcss 是否有效？
不起作用。你能一步一步告诉我该怎么做（在使用 index.html 创建新项目之后）？
@MaximYazykov 创建一个名为 style.pcss 的新文件并添加问题中的代码
@MaximYazykov 查看 LazyOnes 评论。你希望代码编译成 css 吗？因为如果我理解正确，那不是 WebStorm PostCSS 插件所做的。它只是为您提供自动完成、语法高亮等功能。

【解决方案3】：

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

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

它应该可以清楚地工作。

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

【讨论】：