vue-cli 3 中的 Webpack postcss 前缀答案

【问题标题】：Webpack postcss prefixer in vue-cli 3vue-cli 3 中的 Webpack postcss 前缀
【发布时间】：2019-07-23 17:11:10
【问题描述】：

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

This is the webpack config

在我的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 错误。

【问题讨论】：

bulma 不需要在vue-cli 中进行任何特殊配置即可正常工作。 npm 安装模块，将其导入您自己的 .scss 文件中，将 .scss 文件导入您的 main.js 中，您就完成了
是的，我知道，但我想为 bulma 拥有的所有 CSS 类添加前缀。因为它使用非常通用的名称，例如.label，当我将我的应用程序动态加载到现有网站时会导致问题。
你弄明白了吗？与我客户的网站存在相同问题的是使用 Bootstrap 3.4，我们需要将 bulma 集成到更新的部分中。
我最终获取了链接中的代码并生成了带有前缀的 Bulma css。然后我只是将这些添加到我的 Vue 项目中的资产中。所以 Bulma 不像我想的那样来自 node_modules，但它已经足够好了。

标签： javascript vue.js webpack vue-cli-3 postcss-loader

【解决方案1】：

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

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

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

【讨论】：

这行不通。它在所有 css 类前面加上 b- :
非常好，我用“const prefixer = require('postcss-prefix-selector');”试过这个例子并且运作良好。它在所有 css 选择器之前添加前缀。
不错。我刚刚使用@darpet 建议的技术，使用postcss-prefix-selector 将整个CSS 库的范围限定为页面上的一个<div/>