Question

在我的Nuxt应用中，我这样加载了所有的SASS：

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

除了我试图从组件内部使用一些SASS变量之外，它都能完美地工作。

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

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

SassError：未定义变量：$ white

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

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

这是怎么回事？

Answer 1

参考：

SassError：未定义变量：$ white

每个<style lang="scss">都是单独编译的。在解析器知道@import意味着什么之前，您需要$white定义$white的文件到您的组件中。

这就是为什么大多数框架将其变量保存在_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属性的元素。

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

令人困惑的部分是：

来自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

Answer 4

新建立的解决方案，经过检查，它的工作。成立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

Answer 5

大多数其他答案都没有考虑到Nuxt.js隐藏了所有Webpack设置并迫使您通过test_df = pd.DataFrame( {"@odata.context": "http://analysis.windows.net/v1.0/myorg/groups//$metadata#Microsoft.PowerBI.ServiceContracts.Api.V1.RefreshSchedule", "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], "times": ["00:30"], "enabled": "False", "localTimeZoneId": "UTC", "notifyOption": "MailOnFailure"})进行所有操作。

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

距离这个问题已经过去了几个月，所以情况可能有所改变，但是这里...

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

如果这一切看起来太痛苦了，那么有一个Nuxt插件可以将大部分工作/管理从该过程中移除。 Here is a demo

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

5 个答案: