@ctsj/build/src/webpackconfig/config/projectCssModules.js

一个基于webpack的打包工具

const { getPostCssConfigPath, slash, isDev } = require('../../util');

/**
 * cssModules
 * @param webpackConfig
 * @param plugins
 * @param theme
 * @param runtimePath
 */
module.exports = function ({ webpackConfig, plugins, theme = {}, runtimePath }) {
  // include的APP_PATH中的less文件使用cssModules
  if (isDev()) {
    webpackConfig.module.rules[3].use[1].options.modules = {
      // localIdentName: '[path][name]__[local]--[hash:base64:5]',
      getLocalIdent: (context, localIdentName, localName) => {
        // const match = context.resourcePath.match(/src(.*)/);

        // if (match && match[1]) {
        // const path = match[1].replace('.less', '');

        const path = context.resourcePath.replace('.less', '');

        const arr = slash(path)
          .split('/')
          .filter((t) => t)
          .map((a) => a.replace(/([A-Z])/g, '-$1'))
          .map((a) => a.toLowerCase());

        return `${arr.join('-')}-${localName}`.replace(/--/g, '-');
        // }

        // return localName;
      },
      exportLocalsConvention: 'as-is', // 确保类名保持原样
      namedExport: false, // 禁用命名导出，恢复默认导出
    };
    webpackConfig.module.rules[3].use[3].options.lessOptions = {
      modifyVars: theme,
    };
  } else {
    webpackConfig.module.rules[3].use[1].options.modules = {
        auto: true, // 确保自动检测（或设置为 true 强制启用）
        exportLocalsConvention: 'as-is', // 确保类名保持原样
        namedExport: false, // 禁用命名导出，恢复默认导出
    };
    webpackConfig.module.rules[3].use[3].options.lessOptions = {
      modifyVars: theme,
    };
  }

  // include是node_modules中的less文件不需要cssModules
  webpackConfig.module.rules.push({
    test: /\.less$/,
    include: [/node_modules/],
    use: [
      isDev() ? 'style-loader' : plugins.MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: getPostCssConfigPath(runtimePath),
          },
        },
      },
      {
        loader: 'less-loader',
        options: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme,
          },
        },
      },
    ],
  });
};