如何在全局引入scss的变量声明

Question

因为想要避免<style> 标签下使用相对路径单独引入scss文件, 在main.js中引入color.scss的文件

import 'assets/scss/color.scss';

但是在组件中的style标签下找不到$red定义。

<style lang="scss" scoped>

.login {
  background-color: $red;
}
</style>

我现在只能在style标签下引用系统目录的相对路径，但这个样会导致不同层级的vue文件的相对路径不统一

<style lang="scss" scoped>
@import '../assets/scss/color.scss';
.login {
  background-color: $red;
}
</style>

有人知道如何在全局引入scss的变量定义吗？

Answer 1

此方法仅用于Vue.js2.0及以上版本,假设你的全局变量和Mixin存储在src/assets/scss/color.scss里。

打开 build/utils.js 文件

将

scss: generateLoaders(['css', 'sass']),

替换为

 scss: generateLoaders(['css', 'sass?data=@import "~assets/scss/color";']),

重新运行 npm run dev 即可在Vue文件里使用全局变量了。

Answer 2

我找到一个完美解决的方法，是别人文章里给的，我试了，好用！贴上地址：https://segmentfault.com/a/11...

Answer 3

我有一个比较山寨的方案
因为~可以定位到 node_modules 文件夹
所以可以这样写 @import "~vue/../../src/assets/scss/color.scss";
具体目录以你的项目结构为准

Answer 4

试试

@import "../assets/scss/color.scss";

Answer 5

import '~assets/scss/color.scss'

加“~”这个

Answer 6

https://segmentfault.com/a/11...，
打开链接查看引入sass全局变量，mixin，function等部分

Answer 7

题主可以参考：
sass-resources-loader，适用于webpack1,2,3，vue-cli2、3等，官方 github 文档清晰明了。
https://github.com/shakacode/...

Answer 8

vue-cli@3中处理全局SASS/SCSS变量的方法(亲测可用)：
2020年9月6日 12:01:24

# 主流的两种方法 :

• 使用 sass-resources-loader

• vue.config.js 中配置 sass-loader

  // vue.config.js
  
  module.exports = {
    // sass-loader
    // https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
    css: {
      extract: false,
      sourceMap: true,
      loaderOptions: {
        sass: {
          // https://webpack.docschina.org/loaders/sass-loader/#options
          // https://webpack.docschina.org/loaders/sass-loader/#additionaldata
          // https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
          additionalData: '@import "~@/style/variables.scss";'
        }
      }
    },
  }

# 注意：

• 在 vue.config.js 中引入了 variables.scss 后，不要再在 main.js 中引入，否则报错SassError: An @import loop has been found:

# 参考：

• 向预处理器 Loader 传递选项
• 在实际的文件之前添加 Sass / SCSS 代码

Answer 9

怎么在全局引入scss文件呢，我试了还是不行呐

Answer 10

同有这个困惑不知道怎么有没有人解决了这个问题