无法从我的组件访问全局SASS变量

Question

在我的Nuxt应用程序中，我因此加载了所有SASS：

css: [
  '~assets/scss/main.scss'
],

它很好用，除非我试图从组件内部使用一些SASS变量。

<style lang="scss">
.container {
    background-color: $white;
}
</style>

在这种情况下，我收到此错误消息：

SassError：不确定变量：$ white

但是，在定义变量的SASS文件中包含的所有SCSS在整个应用程序中都有效。

好像整个应用程序都知道这些文件，但每个单独的组件都不知道。

发生了什么事？

Answer 1

[大多数其他答案没有考虑到Nuxt.js隐藏了所有Webpack设置，并迫使您通过nuxt.config.js进行所有操作。

我的猜测是Webpack不会将所有SCSS声明一起编译，因此找不到该变量。

距离我遇到这个问题已经几个月了，所以情况可能有所改变，但是这里发生了...

请确保您安装了正确的Node软件包（默认情况下，Nuxt DID不会为我执行此操作）npm i -D node-sass sass-loader
将您的CSS和SCSS文件添加到css: []的nuxt.config.js部分中，请注意此处，因此，如果有单独的文件，请确保在使用变量之前先添加变量之类的内容。
如果使用布局（我认为这是默认的Nuxt设置），请确保layouts/default.vue中包含<style lang="sass"></style>块。如果我没记错的话，这可以是空的，但必须存在。我只有一种布局，但可能需要全部存在。

如果这一切看起来太痛苦了，则有一个Nuxt插件可以将大部分工作/管理从该过程中移除。 Nuxt Style Resources Module

Answer 2

我们应该将scss加载到您的组件中

<style lang="sass">
@import 'path/to/your/_variable.scss'; // Using this should get you the variables

 .my-color {
      color: $primary-color;
 }

或将以下内容添加到您的vue.config.js中

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

Answer 3

Ref：

SassError：不确定变量：$ white

每个<style lang="scss">都是单独编译的。您需要先将@import定义到您的组件中的文件$white，然后解析器才能知道$white的含义。

这就是大多数框架将其变量保存在_variables.scss文件中的原因，该文件已导入所有其他SCSS文件/上下文中。

_variables.scss甚至没有加载到页面中，因为在大多数情况下，它实际上不包含任何规则。它仅包含导入到其他.scss文件中并输出.css的变量定义。

Ref：

但是，在定义变量的SASS文件中包含的所有SCSS在整个应用程序中都有效。

如果在vue.config.js中导入SCSS文件，则输出将是普通的<style>标签。它的内容将在编译/构建时生成，并将生成一些CSS（适用于整个文档）。除非专门导入组件SCSS（使用@import命令），否则编译器将不知道$white的含义。

在编译上下文和浏览器上下文之间有重要区别。编译发生在编译时（最有可能在node-sass中）。浏览器上下文是实际的浏览器，它仅了解编译产生的CSS。

Vue如何仅将样式规则应用于父母，而不应用于相同班级的孩子？这是通过范围界定来实现的。

这意味着将自定义data-v-{key}属性应用于生成的<style>标记中的所有选择器以及应应用于样式的所有元素。

请参见此示例，并使用Web控制台对其进行检查：https://codesandbox.io/s/vue-template-ge2hb

它产生此标记：

如您所见，scoped CSS在选择器中添加了一个额外的[data-v-763db97b]，这意味着它仅适用于具有data属性的元素。

Answer 4

不确定为什么会这样，但是您也可以使用css变量。而且，它们在许多情况下都比同等的变量更好。这是您如何使用它们的方法

将此添加到您的全局scss

:root {
    --white: white;
}

以及您组件的访问权限

<style lang="scss">
.container {
    background-color: var(--white);
}
</style>

刚刚在Nuxt中测试过-效果很好。

UPDATE

刚刚发现此程序包能够与Nuxt中的scss mixins，vars等一起使用。试试吧。