scss文件全局导入的问题

Question

我们在 main.js 中已经全局的引入了 styles/index.scss
为啥在 layout/index.vue 中去直接使用对应 variable.scss 文件中的变量会报错啊

只有将 variable.scss 文件再次局部的引入了之后, 就不会报错了
老师您能给我讲解一下吗, 我没想通的是, 那这样全局导入的意义在哪里啊

在 sidebar.scss 中是没有导入 variable.scss 的, 它这一个文件可以正常的获取到对应的 scss 变量; 它可以用是因为我们在 main.js 中对 index.scss 进行了全局引入, 所以可以直接使用不需要导入, 我这样理解是对的吗, 请问老师?

那为啥在一个 vue 组件中使用 scss 变量, 就导入对应的 scss 模块呢; 是因为组件 style 标签有 scoped 的原因吗?

Answer 1

Sunday 2023-09-24 11:08:43

你好

如果要在一个组件中使用 scss 变量的话，那么是需要单独在这个组件中引入 scss 文件的。原因不是因为 scoped 的原因，而是因为当前的组件会被单独编译，从而导致无法找到对应的变量

• BobLi #1

  那全局样式 style/index.sass 是不是可以不导入那几个模块样式呢

• Sunday 回复 BobLi #2

  不可以的。很多样式是需要全局进行生效的