next.js 官方不支持 less，必须使用 next-with-less 插件配置 less-loader；全局样式需在 _app.tsx 或 layout.tsx 中显式导入，且 @import 外部 css 需加 (css) 标识并注意路径与变量作用域限制。
Next.js 官方不支持 Less，@import 任何 .less 文件都会静默失败或报错——这不是配置漏了，而是构建链路根本没注册 Less 解析器。
为什么 import './style.less' 直接报错或无样式
Next.js v13+ 默认只识别 .css 和 .module.css；所有 .less 文件被 webpack 忽略，连 loader 都没触发。你看到的错误可能是：
-
Module not found: Can't resolve './style.less'（文件未被识别） - 控制台无报错但样式不生效（文件被跳过，未编译）
- 在
_app.tsx中import后仍无效（缺少 loader 注入）
核心原因：没有 less-loader，也没有 webpack rule 告诉它“遇到 .less 就交给 less 处理”。
必须用 next-with-less，别碰已废弃插件
@zeit/next-less 等旧插件早已失效，且与 Next.js v14+ 的 SWC/Turbopack 不兼容。当前唯一稳定方案是 next-with-less：
- 它通过
webpack config注入less-loaderrule，绕过 Next.js 内置 CSS 管道限制 - 自动区分
.less（全局）和.module.less（模块化），无需手动改test正则 - 支持透传
lessLoaderOptions，比如modifyVars或additionalData
安装后，在 next.config.js 中写：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
const withLess = require('next-with-less');
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1890ff' },
},
});
全局 Less 必须在 _app.tsx 或 layout.tsx 中 import
即使配置了 next-with-less，.less 文件也不会自动注入 —— Next.js 要求所有全局样式显式导入入口文件：
- 删掉组件里任何
import './Button.less'（服务端组件中会直接报错） - 只在
app/layout.tsx或pages/_app.tsx顶部import一次：import '../styles/globals.less'; - 确保该
.less文件不含.class {}规则（否则会被重复注入到每个组件）
如果用了 modifyVars 引入 Ant Design 主题，必须加 hack 写法：hack: 'true; @import "antd/dist/reset.css";'，否则变量不生效。
@import (css) 才能安全引入外部 CSS 文件
Less 默认把所有 @import 当作 Less 源码处理。如果你在 main.less 里写了 @import 'normalize.css';，Less 会尝试解析 CSS 语法并报错。
- 必须显式加标识：
@import (css) "~normalize.css/normalize.css"; - 路径用
~前缀需配合lessLoaderOptions.paths配置，否则相对路径更可靠：@import (css) "../assets/css/normalize.css"; - 被
(css)引入的 CSS 文件内部的@import url()不会被递归加载，要手动拆出来逐条声明
最容易被忽略的一点：Less 变量和 mixin 只能在 .less 文件中定义并使用；一旦你用 @import (css) 引入纯 CSS，就彻底失去变量能力——别指望它能读取你在 variables.less 里定义的 @primary-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
