向 Vue cli 3 添加 PostCSS 支持的正确方法

Question

我们如何将 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

我的 postcsssrc.js：

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

Answer 1

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

Answer 2

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 文档中阅读更多内容