将 PostCSS 支持添加到 Vue cli 3 的正确方法答案

【问题标题】：Correct way to add PostCSS support to Vue cli 3将 PostCSS 支持添加到 Vue cli 3 的正确方法
【发布时间】：2018-10-11 07:42:58
【问题描述】：

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

当我尝试像这样导入时

import './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': {}
    }
  }

【问题讨论】：

根据docs其实是默认支持的。
在我的情况下它不起作用@yuriy636，

标签： vue.js postcss vue-cli

【解决方案1】：

PostCSS（正如 Bill 和 Yuriy 指出的那样）默认情况下工作，但 Webpack 加载器仅配置为 .css 扩展。要修改它，请更新您的vue.config.js：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pcss')
      .use('postcss-loader')
      .tap(options =>
        merge(options, {
          sourceMap: false,
        })
      )
  }
}

根据您的需要修改示例。阅读更多vue-cli docs

【讨论】：

谢谢大家！这有帮助
我刚试过，但得到 INFO 正在启动开发服务器... ERROR ReferenceError: merge is not defined
@Nikos 抱歉回复太长了； merge 方法应该从实用程序包中导入（从 lodash 或任何类似的 npm package ）

【解决方案2】：

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

【讨论】：

谢谢大家！这有帮助
如果您将 pcss 发布到 css 中，我确实会破坏 IDE 网络风暴