Next.js 13+ 需在 next.config.js 的 webpack 配置中添加 less-loader 并设 javascriptEnabled: true，配合 additionalData 注入 variables.less，确保 SSR 和静态导出均正常解析 Less。
Next.js 13+ 使用 next.config.js 配置 Less 加载器失败？
默认 Next.js 不支持 Less，直接 @import 或引入 .less 文件会报错 Module parse failed: Unexpected character '@'。SSR 场景下还必须确保服务端也能解析 Less —— 这意味着不能只靠客户端 webpack loader，而要让 next build 和 next start 都能处理。
核心是：用 next-compose-plugins 或（推荐）Next.js 原生的 webpack 配置扩展能力，注入 less-loader，并显式启用 ssr: true。
- 必须安装
less和less-loader（v11+ 兼容 Webpack 5，Next.js 13+ 默认用 Webpack 5） -
next.config.js中需在webpack配置里添加module.rules，匹配/\.less$/ - 关键点：
less-loader的javascriptEnabled: true必须设为true，否则modifyVars或内联 JS 表达式（如~"calc(100vh - @header-height)"）在 SSR 时会报错 - 不要在
getServerSideProps里动态 import less —— 它不是运行时模块，而是构建期资源
如何让 next export 静态导出也包含 Less 编译结果？
next export 本质是基于 getStaticProps 的静态生成，它复用同一套 webpack 构建流程，所以只要 next.config.js 的 Less 配置正确，导出产物中 CSS 就已内联或外链就绪。但要注意：
- 若用了
css-modules（如Component.module.less），类名哈希由构建时生成，SSR 和静态导出行为一致，无需额外处理 - 若在
pages/_app.tsx中全局 importstyles.less，它会被提取为main.css并注入<head>，next export同样生效 - 避免在
useEffect里动态加载 less —— 它不会出现在 HTML 字符串中，SSR/静态导出时缺失样式
为什么 global.less 在服务端渲染后样式丢失？
常见现象：页面首屏闪动、FOUT（Flash of Unstyled Text），或 next start 下部分样式未应用。根本原因不是 Less 配置失败，而是 CSS 注入时机或重复加载冲突：
立即学习“前端免费学习笔记（深入）”；
- 检查是否在多个地方重复 import 同一个
global.less（例如同时在_app.tsx和某个 page 里 import），Next.js 会去重，但可能导致 HMR 或 SSR 时顺序错乱 - 确认没有在
getServerSideProps或组件内使用require('xxx.less')—— Node.js 环境不识别 less，会静默失败或抛异常中断渲染 - 如果用了 CSS-in-JS 库（如 styled-jsx），它和 Less 共存时注意
<style jsx global>与全局 less 的优先级，后者通常更低 - Less 变量（
@primary-color）若定义在被多次@import的文件中，可能因作用域隔离导致服务端编译值为空 —— 推荐统一放在variables.less并用less-loader的additionalData注入
配置示例：最小可用 next.config.js + Less 支持
以下配置经 Next.js 13.4–14.2 验证，支持 app 和 pages 目录，SSR 和静态导出均正常：
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.less$/i,
use: [
{
loader: 'sass-resources-loader',
options: {
resources: './styles/variables.less', // 全局变量自动注入
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
paths: ['node_modules'],
},
},
},
],
});
return config;
},
};
<p>module.exports = nextConfig;</p>注意：sass-resources-loader 这里只是示例用途（实际应换为 less-loader 自带的 additionalData），真正推荐写法是：
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
additionalData: `@import "./styles/variables.less";`,
},
},
}
路径必须是相对 next.config.js 的，且 variables.less 不能含 @import 循环依赖 —— SSR 时解析失败不会报明显错误，只会静默丢弃样式。
