Vue 报错Error: No PostCSS Config found问题及解决

当使用Vue（版本2.x）来开发项目时，有时候会遇到如下错误：

Error: No PostCSS Config found

这是由于在项目中使用了CSS预处理器，如Sass、Less，但是在配置PostCSS时没有设置相关的插件，从而导致PostCSS无法正常工作。那么该如何解决这个问题呢？接下来将详细讲解解决方法。

问题分析

该报错信息提示说PostCSS配置不存在，因此我们需要检查是否在项目中已经安装了PostCSS及相关插件。如果没有安装，我们需要执行以下命令进行安装：

npm install postcss-loader autoprefixer --save-dev

这里我们安装了postcss-loader和autoprefixer插件。

解决方案

方案一：在webpack配置文件中添加PostCSS配置

我们通常使用webpack来构建Vue项目，因此我们需要在webpack的配置文件中配置PostCSS。在webpack.config.js文件中，我们添加如下代码：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      overrideBrowserslist: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8']
                    }
                  ]
                ]
              }
            }
          }
        ]
      },
      // ...其他loader
    ]
  },
  // ...其他配置
}

在上面的代码中，我们使用了postcss-loader来处理CSS。其中，postcssOptions是配置项，里面的plugins数组包含了需要使用的PostCSS插件。在本例中，我们使用了autoprefixer插件来对CSS进行自动添加浏览器前缀。

方案二：在Vue.config.js中添加PostCSS配置

如果你是使用Vue cli构建的项目，那么你可以在vue.config.js文件中添加PostCSS配置，如下所示：

// vue.config.js
module.exports = {
  // ...其他配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')({
            overrideBrowserslist: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8']
          }),
        ],
      },
    },
  },
  // ...其他配置
}

在上面的代码中，我们使用了css.loaderOptions.postcss.plugins来配置PostCSS插件，同样使用了autoprefixer插件来自动添加浏览器前缀。

示例说明

示例一

假设我们在Vue项目中使用了Sass预处理器，在组件中导入Sass样式文件App.scss，但是却遇到了“Error: No PostCSS Config found”报错信息。这时，我们需要通过上述两种方案之一来解决该问题。

在webpack配置文件中配置PostCSS（方案一）：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      overrideBrowserslist: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8']
                    }
                  ]
                ]
              }
            }
          },
        ],
      },
      // ...其他loader
    ]
  },
  // ...其他配置
}

在Vue配置文件中配置PostCSS（方案二）：

// vue.config.js
module.exports = {
  // ...其他配置
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/scss/variables.scss";`
      },
      postcss: {
        plugins: [
          require('autoprefixer')({
            overrideBrowserslist: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8']
          }),
        ],
      },
    },
  },
  // ...其他配置
}

通过以上配置，我们就可以正常使用Sass预处理器了。

示例二

如果我们在Vue项目中使用了Less预处理器，同样也可能会遇到“Error: No PostCSS Config found”报错信息。这时，我们同样需要通过上述两种方案之一来解决该问题。