nextjs 【配置】【1集成scss】

极简风格2025-06-03 17:11

nextjs使用scss

nextjs如果使用的是turbopack构建的项目，那么只支持scss不支持less。如果需要支持less则需要自己配置，这个比较复杂暂不做表述。

下载依赖

create-next-app脚手架构建项目相关scss配置都已经内置了，构建后只需要下载sass依赖即可

c 复制代码

npm i sass

全局scss样式文件

如果你想提前定义一批变量，然后能够在所有的scss文件中无需引入便能直接使用，那么可以做如下配置。

c 复制代码

// next.config.ts
const nextConfig: NextConfig = {
  sassOptions: {
    includePaths: [join("./src/assets/styles/")], 
    prependData:`@import "global.scss";` // 配置全局引入文件
  },
};

上面两个配置项includePaths和prependData的作用分别是

includePaths：配置此项后，项目中所有scss文件中的@import('')语句中的地址，优先在includePaths配置路径下寻找。
c 复制代码
```
// .test.scss
@import("global.scss");
#x 等效于
@import("./src/assets/styles/global.scss")
```
prependData：配置此项后global.scss文件将会在项目中的所有scss文件中自动引入。因为这里配置了includePaths所以等效于
c 复制代码
```
prependData:`@import "./src/assets/styles/global.scss";`
```