nextjs 【配置】【1集成scss】

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";` // 配置全局引入文件
  },
};

上面两个配置项includePathsprependData的作用分别是

  • 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";`
相关推荐
贵沫末14 分钟前
React——基础
前端·react.js·前端框架
aklry26 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9333 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子33 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982434 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug36 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo36 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端