在 JS 中引入并使用 SASS 变量

当前项目使用的后台管理模板的 layout 的部分是有直接引用 sass 文件暴露出来的变量在业务代码中使用的。
比如说:

也没有怎么了解过看这个魔法使用的来源文章中也只说是 webpack 支持了 CSS Modules 的功能，可以直接使用 :export 功能。

只需要在 .scss 中使用 :export { } 把需要暴露的变量暴露出来就可以在 JS 中使用 import 导入了

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

但是最近我更新了一下这个后台管理模板的脚手架，从 VueCLI 4x 升级到了 5.x，就发现在控制台抛出了异常：

export 'default' (imported as 'variables') was not found in '@/styles/variables.scss' (module has no exports)

很明显升级到 VueCLI 5.x 之后引发了这个问题，一开始以为是升级了 VueCLI 之后 webpack 也会一并更新到 5.x，以为多半是 sass-load 版本的问题，遂一起升级到了最新版本，但是并没有解决问题。

但是很明显就是脚手架升级导致的问题。但是为何 4x 的时候支持，但是到 5x 就不支持了，所以去 Vue CLI 的文档中检索了一下 CSS Modules 相关的内容，找到了以下两个内容：

修改 scss 文件的文件名，以 .module.scss 来结尾，比如说 variables.scss 修改为 variables.module.scss。

如果去掉文件名中的 .module，那么不能用 css.modules 这个属性了。现在需要改用 css.requireModuleExtension 属性，并设置为 false。

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

❗ 但是中文文档有问题 实际上是 VueCLI 4.x 的文档，并没有更新到最新的文档。css.requireModuleExtension 属性在 VueCLI 5.x 版本和 css.modules 一样被废弃了。

也就是说配置 css.requireModuleExtension 其实是没有用的，现在需要配置 css-loader 来启用将所有样式文件视为CSS模块的功能：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

也就是说原本默认脚手架配置的开启的配置项现在没有了，得自己手动去配置内置的 css-loader。

相关文档