Using less style in React SPA

[baljinder-maps]

Expected Behaviour

Able to use less style sheet.

In my dependencies I have the following:

    "css-loader": "^5.2.7",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.20.2",

In webpack.config.express.js under rules:

            {
                test: /\.less$/,
                use: [
                  {
                    loader: "style-loader"
                  },
                  {
                    loader: "css-loader",
                  },
                  {
                    loader: "less-loader"
                  }
                ]
            },

Actual Behaviour

Not seeing the styles appear.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

node -v
v13.7.0
npm -v
6.13.6

Sample Code that illustrates the problem

full set of dependencies:

  "dependencies": {
    "@adobe/aem-core-components-react-base": "1.1.3",
    "@adobe/aem-core-components-react-spa": "1.1.3",
    "@adobe/aem-react-editable-components": "~1.1.2",
    "@adobe/aem-spa-component-mapping": "~1.1.0",
    "@adobe/aem-spa-page-model-manager": "~1.3.3",
    "chalk": "^4.1.2",
    "custom-event-polyfill": "^1.0.7",
    "dompurify": "^2.0.7",
    "history": "^4.10.1",
    "isomorphic-dompurify": "0.15.0",
    "node-fetch": "^2.6.0",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.5",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "aem-clientlib-generator": "^1.5.0",
    "aemsync": "^4.0.0",
    "babel-core": "^6.26.2",
    "babel-plugin-universal-import": "^4.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "body-parser": "^1.19.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^5.2.7",
    "dotenv": "10.0.0",
    "dotenv-webpack": "7.0.2",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "express": "^4.17.1",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "sinon": "^7.5.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.1.7",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  },

Logs taken while reproducing problem