如何在NextJS配置文件中组合多加载器？解决SSR迁移资源加载问题

我来帮你一步步解决这个Next.js SSR迁移中的样式和资源加载问题，这些坑我之前也踩过，放心跟着来：

一、让CSS模块和全局样式（含Bootstrap）协同工作 #

Next.js 默认支持CSS模块，但全局样式（比如Bootstrap）需要和模块样式区分处理，避免加载器冲突：

• 首先，模块样式文件必须带.module.css或.module.less后缀，全局样式文件（包括Bootstrap的.css）不要用这个命名规则。
• 在pages/_app.js中直接导入全局样式，这是Next.js推荐的全局样式注入方式，比如：

  // pages/_app.js
  import '../styles/globals.css'; // 你的自定义全局样式
  import 'bootstrap/dist/css/bootstrap.min.css'; // Bootstrap CSS版
  import type { AppProps } from 'next/app';
  
  function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

这样全局样式会作用于整个应用，而模块样式（比如Button.module.css）只会作用于对应的组件，两者完全不会冲突。

二、配置LESS模块与Bootstrap LESS版共存 #

如果用Bootstrap的LESS版（方便自定义变量），先安装必要依赖：

npm install less @next/plugin-less --save-dev
# 或者用yarn
yarn add less @next/plugin-less --dev

然后在项目根目录创建/修改next.config.js，配置LESS插件：

// next.config.js
const withLess = require('@next/plugin-less')({
  lessLoaderOptions: {
    // 如果你需要自定义Bootstrap变量，在这里导入你的变量文件
    additionalData: `@import "${__dirname}/styles/bootstrap-variables.less";`,
  },
});

module.exports = withLess({
  // 其他Next.js配置（比如basePath、images配置等）
  webpack(config) {
    // 后续资源加载的配置会加在这里
    return config;
  },
});

之后在_app.js里导入Bootstrap的LESS入口文件即可：

import 'bootstrap/less/bootstrap.less'; // Bootstrap LESS版

这样LESS模块（比如Card.module.less）和全局LESS样式就能同时正常生效了。

三、处理Bootstrap中的字体、图标等资源文件 #

Next.js 默认不会处理.ttf、.svg、.gif这类资源的加载，需要在webpack配置中添加对应的规则：
修改next.config.js的webpack部分：

// next.config.js
const withLess = require('@next/plugin-less')({
  lessLoaderOptions: {
    additionalData: `@import "${__dirname}/styles/bootstrap-variables.less";`,
  },
});

module.exports = withLess({
  webpack(config) {
    // 添加资源文件加载规则
    config.module.rules.push(
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'fonts/',
          },
        },
      },
      {
        test: /\.(svg|gif|png|jpe?g)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'assets/',
          },
        },
      }
    );
    return config;
  },
});

别忘了安装file-loader：

npm install file-loader --save-dev
# 或者yarn
yarn add file-loader --dev

另外，如果你用的是Bootstrap LESS版，需要调整字体路径变量，在你的bootstrap-variables.less里添加：

@icon-font-path: '../public/fonts/';

然后把Bootstrap的字体文件放到public/fonts/目录下，这样编译时就能正确引用资源了。

四、验证配置是否生效 #

• 一定要重启Next.js开发服务器，配置修改后必须重启才能生效。
• 检查组件中使用模块样式（比如import styles from './Button.module.less'）是否正常生效，同时Bootstrap的全局样式也能作用于页面。
• 打开浏览器开发者工具，查看字体、图标等资源的请求路径，确认能正常加载（没有404错误）。

如果还有冲突，可以排查：

• 确保模块样式文件都带.module.css/.module.less后缀，全局样式不带。
• 检查webpack规则是否有重复或冲突，比如有没有其他插件修改了样式加载器。

内容的提问来源于stack exchange，提问作者Jay