在Nuxt.js中使用SCSS非常方便,无论是Nuxt 2还是Nuxt 3都有良好的支持。以下是详细的配置和使用方法:
一、安装依赖
首先需要安装SCSS相关的依赖包:
bash
# 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
中添加:
javascript
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'
]
}
安装依赖:
bash
npm install --save-dev @nuxtjs/style-resources
Nuxt 3 配置
在 nuxt.config.ts
中添加:
typescript
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. 单文件组件中使用
vue
<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文件
vue
<style lang="scss" scoped>
// 引入组件专用样式
@import "~/assets/scss/components/example.scss";
// 可以在引入后添加额外样式
.additional-style {
margin-top: 1rem;
}
</style>
五、注意事项
-
scoped
修饰符:-
使用
scoped
时,SCSS样式仅作用于当前组件 -
如需修改子组件样式,可使用
::v-deep
穿透:scss::v-deep .child-component { color: red; }
-
-
Nuxt 3 变化:
- 无需额外安装
sass-loader
,vite内置支持 - 全局资源引入方式改为通过vite配置
- 无需额外安装
-
性能优化:
- 避免在全局SCSS中编写过多具体样式
- 全局资源(变量、混合器)应尽量精简
通过以上配置,你可以在Nuxt项目中充分利用SCSS的特性,如变量、嵌套、混合器等,提高样式开发效率和可维护性。