在我的Nuxt
应用程序中,我因此加载了所有SASS:
css: [
'~assets/scss/main.scss'
],
它很好用,除非我试图从组件内部使用一些SASS变量。
<style lang="scss">
.container {
background-color: $white;
}
</style>
在这种情况下,我收到此错误消息:
SassError:不确定变量:$ white
但是,在定义变量的SASS文件中包含的所有SCSS在整个应用程序中都有效。
好像整个应用程序都知道这些文件,但每个单独的组件都不知道。
发生了什么事?
[大多数其他答案没有考虑到Nuxt.js隐藏了所有Webpack设置,并迫使您通过nuxt.config.js
进行所有操作。
我的猜测是Webpack不会将所有SCSS声明一起编译,因此找不到该变量。
距离我遇到这个问题已经几个月了,所以情况可能有所改变,但是这里发生了...
npm i -D node-sass sass-loader
css: []
的nuxt.config.js
部分中,请注意此处,因此,如果有单独的文件,请确保在使用变量之前先添加变量之类的内容。layouts/default.vue
中包含<style lang="sass"></style>
块。如果我没记错的话,这可以是空的,但必须存在。我只有一种布局,但可能需要全部存在。如果这一切看起来太痛苦了,则有一个Nuxt插件可以将大部分工作/管理从该过程中移除。 Nuxt Style Resources Module
我们应该将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";`
}
}
}
};
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
属性的元素。
不确定为什么会这样,但是您也可以使用css变量。而且,它们在许多情况下都比同等的变量更好。这是您如何使用它们的方法
将此添加到您的全局scss
:root {
--white: white;
}
以及您组件的访问权限
<style lang="scss">
.container {
background-color: var(--white);
}
</style>
刚刚在Nuxt中测试过-效果很好。
UPDATE
刚刚发现此程序包能够与Nuxt中的scss mixins,vars等一起使用。试试吧。