如何为Vue CLI 3（Beta 7）正确添加PostCSS支持？

Hey there, I’ve run into similar quirks with early Vue CLI 3 betas—let’s get this sorted out for you! The error you’re seeing happens because Webpack doesn’t know how to handle .pcss files out of the box in this beta version, so we need to add the right loaders and configuration to make it work.

Here’s what you need to do step by step:

1. Install Required Dependencies #

First, install the loaders and PostCSS plugins you’re using (including the postcss-smart-import you mentioned):

npm install postcss-loader css-loader postcss-smart-import autoprefixer --save-dev
# Or if you prefer Yarn:
yarn add postcss-loader css-loader postcss-smart-import autoprefixer -D

2. Add Webpack Rule for .pcss Files #

Vue CLI 3 lets you customize Webpack config via a vue.config.js file (create this in your project root if it doesn’t exist). Add one of these configurations to teach Webpack how to process .pcss files:

Option 1: Using chainWebpack (Vue CLI’s recommended approach) #

module.exports = {
  chainWebpack: config => {
    // Create a rule specifically for .pcss files
    config.module
      .rule('pcss')
      .test(/\.pcss$/)
      // First use css-loader to resolve imports in the file
      .use('css-loader')
        .loader('css-loader')
        .end()
      // Then process the file with postcss-loader
      .use('postcss-loader')
        .loader('postcss-loader')
        .end()
  }
}

Option 2: Using configureWebpack (direct Webpack config) #

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.pcss$/,
          use: ['css-loader', 'postcss-loader']
        }
      ]
    }
  }
}

3. Complete Your postcssrc.js Config #

Your current config looks truncated—make sure it’s fully set up with all the plugins you need:

module.exports = {
  plugins: {
    'postcss-smart-import': {}, // Handles smart import logic
    'autoprefixer': {} // Adds vendor prefixes to your CSS
    // Add other PostCSS plugins here if you need them (e.g., postcss-nested)
  }
}

4. Restart Your Dev Server #

Stop your running npm run serve (or yarn serve) process and restart it—this ensures the new Webpack configuration is loaded properly.

After these steps, your import './index.pcss' should work without that "Module parse failed" error!

内容的提问来源于stack exchange，提问作者Nikos