Javascript vue cli 3中的网页包POSTSS前缀器

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

在我的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
      })
  }

---

这会导致一些内部网页错误。

只需在我的vue.config.js中进行操作即可

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

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

---

bulma不需要vue cli中的任何特殊配置即可正常工作。npm安装模块，将其导入到您自己的.scss文件中，将该.scss文件导入main.js中，然后您就可以了。我知道，但我想为bulma拥有的所有CSS类添加前缀。因为它使用了非常通用的名称，例如.label，当我将应用程序动态加载到现有网站时会出现问题。你找到答案了吗？与我的客户的网站一样的问题是使用Bootstrap3.4，我们需要在更新的部分中集成bulma。我最终得到了链接中的代码并生成了带有前缀的bulma css。然后，我只是将它们添加到我的Vue项目中的资产中。所以Bulma并不像我所希望的那样来自node_模块，但它已经足够好了。这并不好用。它在所有css类前面加上了b-：非常好，我用const prefixer=require'postsss-prefix-selector'尝试了这个例子；而且效果很好。它在所有css选择器之前添加前缀。Nice。我只是使用@darpet建议的技术，使用postcss前缀选择器将整个CSS库范围限定为页面上的一个