javascript - vue-cli 3 中的 Webpack postcss 前缀

Question

我需要使用 webpack 为 Bulma css 类添加前缀。我找到了一个示例，但我的应用程序使用 Vue CLI 3，我不确定如何将 webpack 配置转换为 vue.config.js。

这是 webpack 配置

在我的vue.config.js我有以下内容：

  chainWebpack: config => {
    config.module
      .rule('css-prefixer')
      .use(['style-loader', 'css-loader'])
      .loader('postcss-loader')
      .tap(options => {
        // Prefixer goes here
        return options
      })
  }

这给出了一些内部 webpack 错误。

Answer 1

只需设法在我的 vue.config.js 中做到这一点

const path = require('path')
const prefixer = require('postcss-prefixer')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          prefixer({
            prefix: 'b-'
          })
        ]
      }
    }
  }
}