影响了next.js自定义配置的webpack

[sanheart]

const withPlugins = require('next-compose-plugins');
const withAntdLess = require('next-plugin-antd-less');
// const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

const pluginAntdLess = withAntdLess({
  lessVarsFilePath: './src/styles/variables.less',
});

module.exports = withPlugins([[pluginAntdLess]], {
  webpack(config, options) {
    // TODO: 目前受 antdless组件影响 导致 此处webpack配置没有生效
    const { dev, isServer } = options;
    // Do not run type checking twice:
    /// isServer 属性判断是服务端还是客户端
    if (dev && isServer) {
      // config.plugins.push(new ForkTsCheckerWebpackPlugin());
    }
    return config;
  },
})

我删掉pluginAntdLess webpack里的配置就生效了

[SolidZORO]

所以是改了 next-plugin-antd-less 组件的源码还是怎么解决的？有点不明白。

[sanheart]

所以是改了 next-plugin-antd-less 组件的源码还是怎么解决的？有点不明白。

没有改，感觉应该是受 next-plugin-antd-less 组件的影响，导致我再next自定义配置webpack的时候没有生效。因为我不引入'next-plugin-antd-less'组件是生效的 const pluginAntdLess = withAntdLess({ lessVarsFilePath: './src/styles/variables.less', webpack(config, options) { if (dev && isServer) { config.plugins.push(new ForkTsCheckerWebpackPlugin()); } }); 尝试这样写，也无法增加ForkTsCheckerWebpackPlugin这个配置

[SolidZORO]

next.js 这边的 webpack 插件不能直接 push，要写一些逻辑（其实就是递归 function 传递），给你参考一下。

// ./scripts/next/next-plugin--watcher
/* eslint-disable */
const path = require('path');
const lessVarToCssVar = require('less-var-to-css-var');
const WatchFileAndRunCallbackWebpackPlugin = require('watch-file-change-and-run-callback-webpack-plugin');

const withWatcher = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      const { dev, isServer } = options;
      let enrichedConfig = config;

      //
      // Client
      if (!dev || !isServer) {
        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(enrichedConfig, options);
        }

        return enrichedConfig;
      }

      //
      // Server
      const SRC_DIR = path.resolve(__dirname, '../../src');

      enrichedConfig.plugins.push(
        new WatchFileAndRunCallbackWebpackPlugin({
          matchs: [
            {
              filePath: `${SRC_DIR}/styles/variables.less`,
              callback: () => {
                lessVarToCssVar({
                  inputPath: `${SRC_DIR}/styles/variables.less`,
                  outputPath: `${SRC_DIR}/styles/variables-css.less`,
                  scopeTag: ':root',
                  header: "@import '/src/styles/variables.less';",
                });
              },
            },
          ],
        }),
      );

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(enrichedConfig, options);
      }

      return enrichedConfig;
    },
  });
};

module.exports = withWatcher;

使用

const withWatcher = require('./scripts/next/next-plugin--watcher');

module.exports = withPlugins(
  [
    [
      withAntdLess,
      {
        lessVarsFilePath: './src/styles/variables.less',
        // nextjs: {
        //   localIdentNameFollowDev: true,
        // },
      },
    ],
    [withWatcher],
  ],
  {
    env: {
      NEXT_PUBLIC_BUILD_INFO: JSON.stringify(
        getBuildInfo({ package: require('./package.json') }),
      ),
    },
    webpack(webpackConfig) {
      return webpackConfig;
    },
  },
);

[sanheart]

万分感谢