怎样在Next.js项目中正确引入并编译全局Less为CSS-css教程-PHP中文网

global.less 样式不生效是因为 next.js 默认不支持 less，需通过 global.css 引入并顶层 import；必须将 @import "./global.less" 写入 styles/global.css，并在 app/layout.tsx 顶层 import "@/styles/global.css"。

怎样在next.js项目中正确引入并编译全局less为css

为什么 `global.less` 改了但样式不生效？

Next.js 默认不处理 .less 文件，直接 import 会报错 Module parse failed: Unexpected character '@'。这不是路径或写法问题，而是构建链路缺失 —— 缺少 Less 解析器和 CSS 提取逻辑。

必须安装的依赖和配置项

仅装 less 和 less-loader 不够，Next.js 13+（App Router）要求通过 next.config.js 显式启用 CSS 支持并注册 Less 处理器：

npm install less less-loader（less-loader 版本需 ≤ 12，否则与 Webpack 5 冲突）

在 next.config.js 中添加：

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.less$/i,
      use: ['style-loader', 'css-loader', 'less-loader'],
    });
    return config;
  },
};

⚠️ 注意：style-loader 仅用于开发，生产环境应改用 mini-css-extract-plugin；但 Next.js 内置了 CSS 提取，所以更稳妥的做法是：删掉 style-loader，改用 Next.js 原生支持方式（见下一条）

推荐方案：用 Next.js 原生 CSS 支持 + `less` 预处理器

Next.js 官方支持 .module.less，但对全局 .less 需额外约定 —— 必须放在 app/global.css 或 app/layout.tsx 的顶层 import 链中，且该文件本身不能是 .less，只能是 .css 或 .module.css。因此正确路径是：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

新建 styles/global.less（含 @import、变量、:global{} 等）
新建 styles/global.css，内容只有一行：@layer base; @import "./global.less";
在 app/layout.tsx 最顶部 import：import "@/styles/global.css";
确保 global.css 是纯 CSS 引用，不带 module 后缀，否则会被视为模块化作用域

这样 Next.js 才会走内置 CSS 编译流程，并把 Less 编译结果注入。

常见踩坑点：App Router 下的 `use client` 和样式隔离

如果你在 Client Component 里动态 import .less，或试图在 useEffect 里加载，样式会失效或重复插入。Next.js 的全局样式必须在服务端渲染阶段完成解析：

不要在 useEffect 或事件回调中 import .less
不要把 import "@/styles/global.css" 写在 use client 组件内部 —— 它必须出现在 layout.tsx 或 page.tsx 的顶层作用域
如果用了 CSS-in-JS 库（如 Emotion），注意 :global{} 在 Less 里有效，但在 Emotion 的 css 函数里无效