如果通过 es6-import 语法导入，SCSS 不能覆盖默认变量答案

【问题标题】：SCSS can't override default variables if importing via es6-import syntax如果通过 es6-import 语法导入，SCSS 不能覆盖默认变量
【发布时间】：2019-01-21 00:03:33
【问题描述】：

试图覆盖项目中的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 而不是被覆盖的颜色。但是，如果通过@import 运算符直接在./app_overrides.scss 中导入引导scss-module，则一切正常。最后一个对我来说不合适，就我的项目中使用 es6-import 语法导入的组件数量而言，它们都使用带有可能引导变量覆盖的 scss 样式，所以我需要在末尾需要引导模块main.js.

可能有一些方法可以配置 webpack/sass 以正确排序？

【问题讨论】：

也许这个问题会有所帮助？ github.com/uswds/uswds/issues/952
您的代码与 vue 和 webpack 无关。删除不必要的标签。

标签： javascript twitter-bootstrap webpack sass

【解决方案1】：

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

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

【讨论】：

如果供应商 sass 库包含可覆盖的 !default 定义的变量，则应在导入供应商库之前覆盖它们。即使这没有意义，因为如果我在import './app_overrides.scss'; import 'bootstrap/scss/bootstrap.scss'; 之后立即导入了一些 scss-stylesheet，就像上面的示例一样，那么在后一个文件中看不到前两个文件中定义的任何 sass 变量。变量只是不在不同的 scss 文件之间共享

【解决方案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 变量定义都将消失。

重要提示：不要在 variables.scss 中添加任何 css 描述，因为在编译规则后，它们将被复制粘贴多次样式表文件的输出。

【讨论】：