如何导入全局LESS混合器？解决webpack extract-text-plugin报错问题

嘿，我来帮你搞定这两个问题！首先你遇到的.bg is undefined报错，核心原因是你在index.less里定义的.bg是类选择器，但在style.less里却把它当成LESS混合器（用.bg()的方式）来调用，LESS找不到对应的混合器，自然就报错了。下面分步骤解决你的问题：

一、正确定义并全局导入LESS混合器 #

1. 把类改成混合器（或同时保留类与混合器） #

先修改style-theme-module/less/index.less，把.bg改成混合器的格式（带括号）：

.bg() {
  color: white;
}

如果你还需要保留.bg这个类选择器（比如直接在HTML里用），可以这么写来复用样式代码：

.bg {
  color: white;
}

.bg() {
  .bg; // 复用类的样式作为混合器
}

2. 全局自动注入混合器文件 #

要让这个混合器在任意组件的LESS里直接使用，不用每次手动import，可以通过less-loader的配置实现全局自动导入：
在你的webpack配置文件中，修改less-loader的选项，用additionalData（less-loader v7+版本用这个，旧版本用prependData）把全局混合器文件注入到所有LESS编译过程中：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                // ~告诉webpack去node_modules里找这个模块，路径根据你的实际情况调整
                additionalData: `@import "~style-theme-module/less/index.less";`
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('dist/style.css') // 替换成你想要输出的CSS文件路径
  ]
};

配置完之后，所有LESS文件在编译时都会自动导入这个全局混合器，你在任意组件的LESS里直接写.bg()就能用了。

二、修复extract-text-plugin的报错 #

刚才的报错本质是混合器未正确定义，按上面的步骤修改后，这个错误就会消失。另外给你提个小建议：如果你的webpack版本是4及以上，更推荐用mini-css-extract-plugin替代extract-text-plugin，因为后者对webpack4+的支持已经不太友好了，容易出现兼容性问题。

额外小技巧：如果只是想复用类样式 #

如果你本来的需求是复用.bg类的样式，而不是用混合器，可以用LESS的extend语法，不用修改.bg的定义：

// style.less
.app {
  &:extend(.bg);
}

这样编译后的CSS会把.app和.bg合并成一组选择器，既复用了样式，又能减少代码体积：

.bg, .app {
  color: white;
}

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