Webpack如何将深浅主题less文件编译为css并输出到public目录

你现有配置的问题如下：

1. 正则匹配错误：test: /\-theme.scss$/ 匹配的是scss后缀文件，你的主题文件是less后缀，无法命中规则
2. 使用了style-loader：该loader作用是将编译后的css注入到页面的style标签中，不会生成独立的css文件
3. 缺少独立css提取配置：webpack默认不会将样式单独输出为文件，需要配套插件实现需求

具体实现方案 #

步骤1：安装必要依赖 #

执行命令安装loader和提取css的插件：
npm install less less-loader css-loader mini-css-extract-plugin --save-dev

步骤2：修改webpack配置 #

完整配置参考如下，替换你自己的实际路径即可：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    // 保留你的原有项目入口，例如：
    // main: './src/main.js',
    // 新增两个主题文件作为单独入口
    'light-theme': './src/styles/light-theme.less', // 替换为你的light-theme.less实际存放路径
    'dark-theme': './src/styles/dark-theme.less' // 替换为你的dark-theme.less实际存放路径
  },
  output: {
    path: path.resolve(__dirname, 'public'), // 配置输出根目录为项目public文件夹
    filename: '[name].js',
    clean: false // 如果不需要每次编译清空public目录可以设为false，避免public下其他文件被删除
  },
  module: {
    rules: [
      {
        test: /\-theme\.less$/, // 修正正则，匹配-theme结尾的less文件
        use: [
          MiniCssExtractPlugin.loader, // 替换style-loader，用于提取独立css文件
          'css-loader',
          'less-loader'
        ]
      }
      // 你原有配置中的其他loader规则保留在这里即可
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css' // 输出的css文件名和入口名保持一致
    })
  ]
}

可选优化：移除冗余的js文件 #

因为把less作为入口会生成对应的同名js空文件，如果需要自动清理可以安装webpack-plugin-remove-extra-assets插件，在plugins中添加如下配置：

const RemoveExtraAssetsPlugin = require('webpack-plugin-remove-extra-assets')

// plugins数组中新增
new RemoveExtraAssetsPlugin({
  assets: ['light-theme.js', 'dark-theme.js']
})

配置完成后重新执行编译命令，public目录下就会生成对应的两个css文件，开发服务启动后直接通过/light-theme.css、/dark-theme.css即可访问，在index.html中直接用link标签引入即可使用。

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