详解Nuxt Sass全局变量（公共SCSS解决方案）

在Nuxt.js中，我们可以使用Sass来管理样式，并且可以通过全局变量来共享样式属性。这个攻略将详细介绍如何在Nuxt.js项目中设置全局Sass变量，并在组件中使用它们。

步骤1：安装依赖

首先，确保你的Nuxt.js项目已经安装了sass-loader和node-sass依赖。如果没有安装，可以通过以下命令进行安装：

npm install sass-loader node-sass --save-dev

步骤2：创建全局变量文件

在项目的根目录下，创建一个名为variables.scss的文件。这个文件将包含你的全局Sass变量。在这个文件中，你可以定义任何你想要的全局变量，比如颜色、字体大小等。以下是一个示例：

$primary-color: #ff0000;
$font-size: 16px;

步骤3：配置Nuxt.js

在Nuxt.js项目的根目录下，找到nuxt.config.js文件，并添加以下配置：

module.exports = {
  css: [
    '@/assets/scss/variables.scss'
  ]
}

这个配置告诉Nuxt.js在编译时引入全局变量文件。

步骤4：使用全局变量

现在，你可以在你的组件中使用全局变量了。在你的组件的样式中，可以通过$符号来引用全局变量。以下是一个示例：

<template>
  <div class=\"my-component\">
    <h1 :style=\"{ color: $primary-color }\">Hello World</h1>
    <p :style=\"{ fontSize: $font-size }\">This is a paragraph.</p>
  </div>
</template>

<style lang=\"scss\">
.my-component {
  /* 使用全局变量 */
  h1 {
    color: $primary-color;
  }

  p {
    font-size: $font-size;
  }
}
</style>

在上面的示例中，我们使用了$primary-color和$font-size这两个全局变量来设置标题和段落的样式。

示例说明

示例1：设置主题颜色

假设你想要在整个项目中使用相同的主题颜色。你可以在variables.scss文件中定义一个名为$theme-color的全局变量，并将其设置为你想要的颜色值。然后，在你的组件中使用这个全局变量来设置样式。

// variables.scss
$theme-color: #ff0000;

// MyComponent.vue
<template>
  <div class=\"my-component\">
    <h1 :style=\"{ color: $theme-color }\">Hello World</h1>
  </div>
</template>

<style lang=\"scss\">
.my-component {
  h1 {
    color: $theme-color;
  }
}
</style>

示例2：设置字体大小

假设你想要在整个项目中使用相同的字体大小。你可以在variables.scss文件中定义一个名为$font-size的全局变量，并将其设置为你想要的字体大小。然后，在你的组件中使用这个全局变量来设置样式。

// variables.scss
$font-size: 16px;

// MyComponent.vue
<template>
  <div class=\"my-component\">
    <p :style=\"{ fontSize: $font-size }\">This is a paragraph.</p>
  </div>
</template>

<style lang=\"scss\">
.my-component {
  p {
    font-size: $font-size;
  }
}
</style>

这样，你就可以在整个项目中轻松地更改主题颜色和字体大小，而不需要逐个修改每个组件的样式。

希望这个攻略对你有帮助！