无法使用 Electron React Boilerplate 配置 less-loader

Question

我正在使用 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 时，它运行s自定义主题颜色很好，但是当我尝试使用 yarn start 在 production 中运行时，它显示空白屏幕错误

Answer 1

您可以在 webpack.config.renderer.prod.babel.js

中将 loader: 'style-loader', 替换为 loader: MiniCssExtractPlugin.loader

global.less global less

其他 .less 文件 less file not the global

希望对您有所帮助

无法使用 Electron React Boilerplate 配置 less-loader

Unable to configure less-loader with Electron React Boilerplate

reactjs

webpack

electron

less

electron-react-boilerplate