vue.js - 向 Vue cli 3 添加 PostCSS 支持的正确方法

Question

我们如何将 PostCSS 支持添加到 Vue cli 3(我使用的是 beta 7)？有它的插件吗？它不支持开箱即用。

当我尝试像这样导入时

导入 './index.pcss'

使用默认的cli生成的项目

./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
|   font-family: "sofachrome", serif;
| }
 @ ./src/main.js 5:0-22

我的 postcssrc.js:

module.exports =
  {
    'plugins': {
      'autoprefixer': {},
      'postcss-smart-import': {},
      'postcss-custom-properties': {},
      'postcss-nested': {}
    }
  }

Answer 1

只需使用.css 扩展名，而不是.pcss。如果你必须使用 .pcss 你必须在 webpack 中配置它。至于如何正确利用该规则来做到这一点，我需要进行一些研究。不过，我认为仅使用 .css 是一个明显的胜利。