在我的 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
nuxt.config.js 的 css: [] 部分 此处的顺序很重要，因此如果您有单独的文件，请确保在使用它们的内容之前添加变量等内容。layouts/default.vue 中有一个 <style lang="sass"></style> 块。如果我没记错的话，这可能是空的，但必须存在。我只有一种布局，但它可能需要存在于所有布局中。如果这一切看起来太痛苦了，那么有一个 Nuxt 插件可以将大部分工作/管理工作从该过程中解放出来。 Nuxt Style Resources Module
【讨论】：
参考：
SassError：未定义变量：$white
每个<style lang="scss"> 都是单独编译的。在解析器知道$white 的含义之前，您需要将定义$white 的文件@import 放入您的组件中。
这就是为什么大多数框架将它们的变量保存在 _variables.scss 文件中，该文件被导入到所有其他 SCSS 文件/上下文中。
_variables.scss 甚至没有加载到页面中，因为在大多数情况下它实际上不包含任何规则。它仅包含导入到其他.scss 文件中的变量定义，这些文件输出.css。
参考：
然而，定义变量的 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 属性的元素。
【讨论】：
令人困惑的是：
scss 文件中的样式可以像这样加载
//nuxt.config.js
css: [
'~assets/scss/main.scss'
],
//global scss file
$varcolor: black
h1{background: $varcolor}
但是
不能在组件内使用的变量
//inside component
.component {background: $varcolor} // DOES NOT WORK
我还建议使用 nuxt 样式的资源模块： https://github.com/nuxt-community/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";`
}
}
}
};
【讨论】：
新建立的解决方案，检查并且它的工作。成立here 添加@nuxtjs/style-resources
export default {
css: [
'vendor.min.css'
],
modules: [
'@nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/main.scss'] // here I use only main scss with globally styles (variables, base etc)
},
}
这很奇怪，但是如果你将 tilda (~) 改为 dot(.)，这对某人有帮助
从css: [ '~assets/scss/main.scss' ] 到css: [ './assets/scss/main.scss' ]
这个解决方案找到了here
【讨论】：