无法使用 Electron React 样板配置 less-loader答案

【问题标题】：Unable to configure less-loader with Electron React Boilerplate无法使用 Electron React 样板配置 less-loader
【发布时间】：2020-09-11 15:59:39
【问题描述】：

我正在使用 Ant Design 和 Electron React Boilerplate，并且需要加载较少的文件作为全局样式来自定义其主题颜色，如提到的 here。我在 webpack.config.renderer.dev.babel.js 和 webpack.config.renderer.prod.babel.js 中将 less-loader 配置为

{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#e6315a',
            'link-color': '#e6315a',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    }],
  },

这是我的less文件 app.global.less

@import '~ag-grid-community/dist/styles/ag-grid.css';
@import '~ag-grid-community/dist/styles/ag-theme-alpine.css';
@import '~antd/dist/antd.less';

当我尝试使用 yarn dev 在开发中运行时，自定义主题颜色运行良好，但是当我尝试在生产中运行 使用 yarn start，它显示空白屏幕并出现此错误

【问题讨论】：

标签： reactjs webpack electron less electron-react-boilerplate

【解决方案1】：

你可以在 webpack.config.renderer.prod.babel.js 中将 loader: 'style-loader', 替换为 loader: MiniCssExtractPlugin.loader

global.less global less

其他 .less 文件 less file not the global

希望对你有帮助

【讨论】：