如何在nuxt项目中使用scss

在Nuxt.js中使用SCSS非常方便，无论是Nuxt 2还是Nuxt 3都有良好的支持。以下是详细的配置和使用方法：

一、安装依赖

首先需要安装SCSS相关的依赖包：

# Nuxt 2
npm install --save-dev node-sass sass-loader sass

# Nuxt 3 (使用vite作为构建工具)
npm install --save-dev sass

二、全局配置（可选）

如果需要全局引入SCSS变量、混合器等资源（如variables.scss、mixins.scss），可以通过Nuxt配置实现：

Nuxt 2 配置

在 nuxt.config.js 中添加：

export default {
  // 配置全局SCSS资源
  css: [
    '~/assets/scss/main.scss' // 全局样式文件
  ],
  styleResources: {
    scss: [
      '~/assets/scss/variables.scss', // 全局变量
      '~/assets/scss/mixins.scss'    // 全局混合器
    ]
  },
  
  // 需要安装 style-resources-loader
  buildModules: [
    '@nuxtjs/style-resources'
  ]
}

安装依赖：

npm install --save-dev @nuxtjs/style-resources

Nuxt 3 配置

在 nuxt.config.ts 中添加：

export default defineNuxtConfig({
  css: [
    '~/assets/scss/main.scss' // 全局样式文件
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "~/assets/scss/variables.scss" as *;
            @use "~/assets/scss/mixins.scss" as *;
          `
        }
      }
    }
  }
})

三、目录结构建议

assets/
└── scss/
    ├── main.scss        # 主样式文件
    ├── variables.scss   # 变量定义
    ├── mixins.scss      # 混合器
    ├── reset.scss       # 重置样式
    └── components/      # 组件相关样式

四、在组件中使用SCSS

在Vue组件中，可以通过以下方式使用SCSS：

1. 单文件组件中使用

<template>
  <div class="example">SCSS 示例</div>
</template>

<style lang="scss" scoped>
// 可以直接使用全局变量和混合器
.example {
  color: $primary-color; // 来自variables.scss
  @include flex-center;  // 来自mixins.scss
  
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

2. 引入外部SCSS文件

<style lang="scss" scoped>
// 引入组件专用样式
@import "~/assets/scss/components/example.scss";

// 可以在引入后添加额外样式
.additional-style {
  margin-top: 1rem;
}
</style>

五、注意事项

1. scoped 修饰符：

   • 使用 scoped 时，SCSS样式仅作用于当前组件
   • 如需修改子组件样式，可使用 ::v-deep 穿透：

     ::v-deep .child-component {
       color: red;
     }
     

2. Nuxt 3 变化：

   • 无需额外安装 sass-loader，vite内置支持
   • 全局资源引入方式改为通过vite配置

3. 性能优化：

   • 避免在全局SCSS中编写过多具体样式
   • 全局资源（变量、混合器）应尽量精简

通过以上配置，你可以在Nuxt项目中充分利用SCSS的特性，如变量、嵌套、混合器等，提高样式开发效率和可维护性。