Nuxt怎么引入全局scss变量

要在Nuxt中引入全局SCSS变量，可以如下操作：

1. 在`assets`目录下创建`scss`文件夹，并在其中创建一个`variables.scss`文件，用于定义全局变量。
2. 在`nuxt.config.js`中配置`styleResources`选项，指定需要注入到每个组件中的SCSS文件路径，包括刚刚创建的全局变量文件。

export default {
  ...
  buildModules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      '~/assets/scss/variables.scss'
    ]
  },
  ...
}

3. 在需要使用全局变量的组件中，使用`@import`引入全局变量文件。

<style lang="scss">
  @import '~/assets/scss/variables.scss';

  ...
</style>

这样，就可以在所有组件中使用全局变量了。

相关问题

nuxt sass 全局变量的问题_nuxt.js引入scss文件，变量Undefined variable【已解决】

您好，关于 nuxt sass 全局变量的问题，可以按照以下步骤进行解决：

1. 安装 sass 和 sass-loader

首先需要安装 sass 和 sass-loader，可以使用以下命令进行安装：

npm install sass sass-loader --save-dev

2. 创建全局变量文件

在项目根目录下创建一个名为 `variables.scss` 的文件，用于定义全局变量，例如：

$primary-color: #1890ff;
$font-size-base: 14px;

3. 配置 nuxt.config.js

在 `nuxt.config.js` 文件中，使用 `sass-resources-loader` 插件，将全局变量文件引入到所有的 scss 文件中，例如：

module.exports = {
  buildModules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      '@/assets/scss/variables.scss'
    ]
  }
}

4. 使用全局变量

在 scss 文件中可以直接使用定义的全局变量，例如：

.header {
  background-color: $primary-color;
  font-size: $font-size-base;
}

以上就是使用 nuxt sass 全局变量的解决方案，希望对您有帮助。