VueCli3如何传递scss全局变量

当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候

哦豁，找不到变量，意料之外

我发现犯了一个错误，没导入，@import 'path/to/file.scss'，不过这样的话，每个.vue文件导入起来很麻烦，我们需要一种导入然后默认在.vue导入使用，比较方便

暂时没研究原理，在官方配置手册找到了解决方案

根目录下新建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

转载于:https://www.cnblogs.com/sefaultment/p/10439644.html