I used less in the react program, but less did not take effect

Question

I used less in the react program, but less did not take effect

I used a minimum set, below is the content

app.tsx：

import React from 'react'
import {
  message,
  Popover,
  Button,
  Checkbox,
} from 'antd';
import '../public/antd.css';
import './app.less'
import './test123.less'
// import styles from './app.less';
// import styles2 from './test123.less'

export default class extends React.Component {
  dict = null;
  onceStorageStart = 0
  
  state = {
    show: false,
    isDict: false,
  }

  constructor(props) {
    super(props)
    this.state = {
      show: false,
      isDict: false,
    }
  }

  setButton = () => {
    let onChange = (e) => {
    }
    let onChangeClear = (e) => {
    }
    let onChangeFull = (e) => {
    }

    return (
      <div className='setDiv'>
        <Checkbox onChange={onChange}>开启翻译</Checkbox>
        <Checkbox onChange={onChangeClear}>清除数据</Checkbox>
        <Checkbox onChange={onChangeFull}>全屏</Checkbox>
      </div>
    )
  }
  render() {
    return (
      <div className={`appColor`}>
        hi
        <span className='appColor1'>i </span>
        <Popover content={this.setButton()} title="Title">
          <Button type="primary" className={`setBtn`}>
            set
          </Button>
        </Popover>
      </div>
    )
  }
}

test123.less

.appColor1 {
  background-color: red;
}

.appColor233 {
  background-color: red;
}

webpack.config.js

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

/** webpack的obj */
const webpackObj = {
  entry: {
    app: './src/index.tsx',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist',
  },
  cache: true,
  context: path.resolve(__dirname),
  mode: process.env.NODE_ENV || 'production',
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.css', '.json'],
    alias: {
      '@src': path.resolve(__dirname, './src'),
      '@common': path.resolve(__dirname, '../basicPublic'),
      '@base': path.resolve(__dirname, '.'),
    }
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    host: '0.0.0.0',
    allowedHosts: "all",
    static: {
      watch: {
        poll: true,
        ignored: /node_modules/,
      },
    },
    port: 3334,
    client: {
      overlay: false,
      progress: true,
    },
  },
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 20480,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader',
          'cache-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false
            }
          }
        ],
      },
      {
        test: /\.(j|t)sx?$/i,
        resolve: {
          fullySpecified: false,
        },
        use: [
          'cache-loader',
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          }],
      },
      {
        test: /\.less$/,
        use: ['style-loader',
          'cache-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false,
            }
          },
          "less-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
  performance: {
    hints: false,
  },
  optimization: {
    minimize: true,
    minimizer: [
    ],
    usedExports: true,
    runtimeChunk: true,
  },
}
module.exports = webpackObj

package.json

{
  "name": "myfront",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "sideEffects": false,
  "main": "dist/app.tsx",
  "scripts": {
    "front": "cd ./client && cross-env NODE_ENV=development  webpack serve ",
  },
  "dependencies": {
    "@ant-design/icons": "^5.2.6",
    "@types/jest": "^29.2.0",
    "@types/node": "^18.11.3",
    "antd": "^4.19.5",
    "axios": "^0.21.1",
    "eslint-plugin-react": "^7.29.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/node": "^7.20.0",
    "@babel/plugin-proposal-class-properties": "7.16.7",
    "@babel/plugin-proposal-decorators": "7.17.8",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.21.0",
    "@eslint/js": "^8.56.0",
    "@ffprobe-installer/ffprobe": "^1.4.1",
    "@types/node": "^18.15.3",
    "@types/node-netstat": "^1.8.4",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/video.js": "^7.3.56",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "babel-loader": "8.2.4",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "body-parser": "^1.20.0",
    "cache-loader": "^4.1.0",
    "cheerio": "^1.0.0-rc.10",
    "classnames": "^2.5.1",
    "cross-env": "7.0.3",
    "css-loader": "~6.5.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "dependency-cruiser": "^12.10.1",
    "eslint": "^8.56.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "6.2.0",
    "get-video-duration": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "json-loader": "^0.5.7",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "less-plugin-aliases": "^1.0.3",
    "log4js": "^6.4.6",
    "mini-css-extract-plugin": "^2.7.7",
    "node-ffprobe": "^3.0.0",
    "react-highlight-words": "^0.18.0",
    "react-refresh": "^0.14.0",
    "react-window": "^1.8.7",
    "request": "^2.88.2",
    "speed-measure-webpack-plugin": "^1.5.0",
    "style-loader": "3.3.1",
    "tesseract.js": "^5.0.3",
    "ts-loader": "^9.4.2",
    "tsconfig-paths": "^4.1.2",
    "tslint": "^6.1.3",
    "typescript": "^4.9.5",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.64.4",
    "webpack-bundle-analyzer": "^4.10.1",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.8.0"
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { 
      "@src/*": [
        "./src/*"
      ],
      "@common/*": [
        "../basicPublic/*"
      ],
      "@base/*": [
        "./*"
      ],
    },
    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true
  },
  "include": ["src","typings.d.ts","../basicPublic/**/*",],
  "exclude": [
    "node_modules"
  ]
}

When I use this form, "import styles2 from './index. less'", and modify the className, the program is correct. However, using "import './app. less'" cannot introduce the content of less.

There is no content related to less in the webpack packaging file app. bundle. js. Below is the location of the class, which is located in app. bundle. js

_createClass(_default, [{
    key: "render",
    value: function render() {
      console.log('app 渲染');
      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
        className: "appColor"
      }, "\u6211\u662F\u9996\u9875\uFF0C\u5F00\u5FC3\u7684\u9996\u98751", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
        className: "appColor1"
      }, "fjklajgekla;gj\u4E5D\u5206\u88E4\u5783\u573E\u5C4B\u674E\u51EF\u6B4C\u4E5D\u963F\u54E5\u8003\u62C9\u7F51\uFF1B "), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
        className: "appColor5"
      }, "fjklajgekla;gj\u4E5D\u5206\u88E4\u5783\u573E\u5C4B\u674E\u51EF\u6B4C\u4E5D\u963F\u54E5\u8003\u62C9\u7F51\uFF1B "), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(antd__WEBPACK_IMPORTED_MODULE_2__["default"], {
        content: this.setButton(),
        title: "Title"
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(antd__WEBPACK_IMPORTED_MODULE_3__["default"], {
        type: "primary",
        className: "setBtn"
      }, "\u8BBE\u7F6E")));
    }
  }]);

I think it's a version issue, Then use

pnpm add @ ant design/icons @ types/jest @ types/node antd axis react dom

and

pnpm add - D @ babel/core @ babel/node @ babel/plugin proposal class properties @ babel/plugin proposal designers @ babel/pre-set env @ babel/pre-set read @ babel/pre-set typescript @ eslint/js @ types/node @ types/node netstat @ types/react @ types/react ct dom @ types/video.js @ typescript elint/elint plugin @ typescrip T-eslint/partner babel loader babel plugin name asset import babel pre-set read app cache loader classnames cross env css loader dependency cruise eslint eslint config airbnb base eslint import resolve alias eslint plugin import eslint webpack plugin file loader get video duration html-webpack plugin json loader less less less less less plugin aliases mini CSS extract plugin node fprobe react big Hlight words react refresh react window style loader ts loader tsconfig paths tslint typescript URL loader webpack webpack bundle analyzer webpack cli webpack dev server webpack merge

to automatically determine version, but it still doesn't work

Answer 1

Just by reading a little bit the npm docs:

https://www.npmjs.com/package/less-loader

I notice that you are not matching less as the example:

test: /\.less$/ // your config
test: /\.less$/i // npm example

also you may add the debugging for it

  options: {
    lessLogAsWarnOrErr: true,
  },

removing the "cache-loader" just to test and match as the example code might also be a good way to fix.