Question

试图覆盖项目中的sass默认变量（堆栈是关于sass + babel + webpack，由vue-cli生成的），但没有任何内容被覆盖。我使用引导程序，因此如果导入sass模块，如

// in main.js
import './app_overrides.scss'
import 'bootstrap/scss/bootstrap.scss'

其中 ./ app_overrides.scss 包含：

$def_color: #aaaaaa;

和 bootstrap / scss / bootstrap.scss （例如）：

$def_color: #ffffff !default;

h1 {
  color: $def_color;
}

h1最终具有默认颜色#ffffff，而不是被覆盖的颜色。但是，如果通过./app_overrides.scss运算符直接在@import中导入bootstrap scss-module，则一切正常。最后一个对我来说不合适，因为我的项目中有许多组件是使用es6-import语法导入的，所有这些组件都使用scss样式并带有可能的引导程序变量覆盖，因此我需要在末尾要求引导程序模块main.js。

也许有某种方法可以配置webpack / sass来正确地对事物进行排序？

Answer 1

由于所有的scss文件都捆绑成一个巨大的css文件，因此导入文件时文件的顺序至关重要。

因此，您需要首先加载您的库，然后定义您的变量，mixin，动画等，最后定义您的自定义样式。

Answer 2

这是WebPack + Sass项目中的众所周知的问题。为了解决这个问题，所有共享变量和替代都应导出到单个文件中，例如variables.scss并手动添加到webpack配置 like described over there：

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/variables.scss', 'utf-8')  //your-path-here
      }
    }
  }
}

这会将variables.scss注入项目中每个sass文件的标题，因此，variables.scss中描述的变量将在所有scss文件之间共享。编译成本地css文件后，所有sass变量定义都将消失。

重要提示：请勿在{{1}}中添加任何CSS描述，因为在编译规则后，它们将被复制粘贴，是您将在输出中获得的样式表文件的次数。

如果通过es6-import语法导入，则SCSS无法覆盖默认变量

2 个答案: