向 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

我的postcssrc.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 docs

中阅读更多内容

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

Correct way to add PostCSS support to Vue cli 3

vue.js

postcss

vue-cli