Question

我正在创建自定义Vue2 + Bulma组件。它可以在自己的项目中正常工作。但是，当我将其添加到其他项目中时，就会与SCSS变量发生冲突。

这是场景：

@import'〜bulma / sass / utilities / _all';

我在模板类中使用的是“ is-primary”。在其他地方，我正在使用$ primary变量更改边框或背景的颜色。
在我的主项目中，导入组件后，它按预期运行正常。
我在主项目中有一个自定义SCSS，在其中我将默认的布尔玛变量覆盖为不同的颜色，例如：$ primary-> Purple。
然后该组件的行为如下：对于所有is-primary和类似的类，将显示新颜色。对于我使用$ primary创建的所有SCSS规则，它们均具有默认的布尔玛原色：$ turquoise。

在开发和生产版本中都会发生这种情况。有任何解决办法吗？不必将所有变量都更改为静态颜色，而无需从主项目覆盖规则或使用通用Bulma类代替特定的SCSS规则。

谢谢！

Answer 1

您的关键问题是您的SCSS变量未在按组件构建中加载。如果您正在使用webpack和vue-loader进行构建，最好的解决方案是将默认变量设置为“全局” scss，并为每次编译加载。参见https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables

例如，如果您的变量位于src/_variables.scss中，则配置将类似于：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "src/variables.scss";'
      }
    }
  }
}