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

问题描述 投票:0回答:3

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

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

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

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

在这种情况下,我收到此错误消息:

SassError:不确定变量:$ white

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

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

发生了什么事?

css vue.js sass nuxt
3个回答
0
投票

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

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

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

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

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


0
投票

我们应该将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";`
      }
    }
  }
};

0
投票

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

它产生此标记:

enter image description here

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


-1
投票

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

将此添加到您的全局scss

:root {
    --white: white;
}

以及您组件的访问权限

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

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

UPDATE

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

https://github.com/nuxt-community/style-resources-module

© www.soinside.com 2019 - 2024. All rights reserved.