Electron + react 中使用less，less不起作用

Question

我可以确认我lessload配置正确，并且打包的log也显示less被打包进去了，不知道是不是electron的原因还是webpack有其他东西我没有配置成功。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const rootPath = path.resolve(__dirname, '..');

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    mainFields: ['main', 'module', 'browser'],
  },
  entry: path.resolve(rootPath, 'src', 'App.tsx'),
  target: 'electron-renderer',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.less$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                strictMath: true,
              },
            },
          },
        ],
      },
    ],
  },
  devServer: {
    contentBase: path.join(rootPath, 'dist/renderer'),
    historyApiFallback: true,
    compress: true,
    hot: true,
    host: '0.0.0.0',
    port: 4000,
    publicPath: '/',
  },
  output: {
    path: path.resolve(rootPath, 'dist/renderer'),
    filename: 'js/[name].js',
    publicPath: './',
  },
  plugins: [new HtmlWebpackPlugin()],![image.png](/img/bVcSfNq)

import React, { FC } from 'react';
import styles from './index.less';
export interface LayoutProps {}

const Layout: FC<LayoutProps> = (props) => {
  return <div className={styles.test}>12333f</div>;
};

export default Layout;

我就是这样简单使用less导致内容显示不出来

webpack打包信息

Answer 1

已解决，重启电脑就好了，应该是dist文件没有被更新导致的。