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";`
相关推荐
LinDaiuuj16 分钟前
最新的前端技术和趋势(2025)
前端
一只小风华~24 分钟前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟1 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus3 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉3 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A3 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6663 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus3 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus3 小时前
react-router-dom中的几种路由详解
前端·react.js
若梦plus3 小时前
Vue服务端渲染
前端·vue.js