Question

我们如何向Vue cli 3添加PostCSS支持（我正在使用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

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

中的更多内容

Answer 2

只需使用#include <unistd.h> #include <stdio.h> size_t count_char(char *str, char s) { size_t count = 0; for (size_t i = 0; str[i]; i++) if (str[i] == s) count += 1; return (count); }扩展名，而不是.css。如果必须使用.pcss，则必须在webpack中配置它。至于如何正确地利用该规则来做到这一点，我需要研究一下。虽然，我认为只使用.pcss是明显的胜利。

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

2 个答案: