Question

我正在通过style-resources-loader在Vue组件的SCSS处理中导入多个配置类型文件。

这些包括引导程序_functions.scss，_variables.scss和我自己的variables.scss文件，该文件设置自定义变量并覆盖一些默认的引导文件...理论上。

实际上，我尝试覆盖的所有值（colors，theme-colors）仍在使用默认的引导程序值。

我确定的声明是正确的。我已经用引号而不是引号（蓝色，主要）中的键看到了它，并且尝试了两种方式，都没有改变。

//variables.scss - my file
$red-primary:#da291c;
$blue-primary:#167CAC;
$colors: (
    blue:       $blue-primary,
)
$theme-colors: (
    primary:    $red-primary,
)

我尝试使用variables.scss文件进行加载程序配置，该文件在引导SCSS文件like this answer suggests之前和之后交替出现，并且没有变化。 我尝试在每次更改后运行完整版本，以确保它不仅仅是实时加载程序。

module.exports = {
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'scss',
        patterns: [
          path.resolve(__dirname, './src/styles/variables.scss'),
          path.resolve(__dirname, './node_modules/bootstrap/scss/_functions.scss'),
          path.resolve(__dirname, './node_modules/bootstrap/scss/_variables.scss'),
        ],
        }
    },
};

但是$blue和$primary仍然是默认的引导程序#007bff，而不是我设置的颜色。

也尝试过

在完全相同的地方，我可以做：

$blue: $blue-primary;
$primary: $red-primary;

并且覆盖有效。不过，这不是一个很好的解决方案。这个示例仅涉及这两种颜色，但是通过模式创建的设置很多，而这些设置将很难以这种方式实现。我不能接受这是一个可行的答案。

Bootstrap 4 SCSS速记覆盖不起作用

0 个答案: