Also using .less files with antd

Hey! Really like the craco, and the antd plugin I think its exactly what I need. I'm building a new app with CRA with TypeScript, inside Electron and Antd as UI framework. So far everything is working and I can modifly Antd variables with my custom .less file with the following craco.config.electron.js:

const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer"
    },
    plugins: [new WebpackBar({ profile: true })]
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "src/styles/antdCustom.less"
        )
      }
    }
  ]
};

The problem is that I also want to use ".less" and ".module.less" files for sytlying my react components, and use some of the colors provided by antd, so it would be rellay nice to use less instead of plain css. But I cant get it to work, I read all the issues in craco-less and craco-antd. I'm sure its just a simple config in the "CracoAntDesignPlugin" but I'm fairly new in this webpack environment. Tried several settings but usually get this error:

[build:electron] ./src/App.module.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .App {
|   text-align: center;
| }

The relevant parts of my package.json:

"scripts": {    
    "build:electron": "env-cmd -f .env.electron craco build --config craco.config.electron.js"   
  },  
  "dependencies": {
    "@craco/craco": "^5.2.1",
    "@types/jest": "24.0.13",
    "@types/node": "12.0.3",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "antd": "^3.19.8",
    "craco-antd": "^1.11.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.5.1"
  }, 
  "devDependencies": {
    "electron": "5.0.2",
    "electron-builder": "20.41.0",
    "env-cmd": "9.0.2",
    "npm-watch": "0.6.0",
    "webpackbar": "^3.2.0"
  }

Or mabye I'm importing incorrectly in my App.tsx import classes from "./App.module.less";

Any help would be appreciated to find the missing config I need.

So of course after failing for one day, I solved it after I posted this issue. this is what my "craco.config" looks like:

const WebpackBar = require("webpackbar");
const path = require("path");

module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer"
    },
    plugins: [new WebpackBar({ profile: true })]
  },
  plugins: [
    {
      plugin: require("craco-antd"),
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "src/styles/AntdCustom.less"
        ),
        lessLoaderOptions: {
          noIeCompat: true
        }
      }
    },
    {
      plugin: require("craco-less"),
      options: {
        noIeCompat: true
      }
    }
  ]
};

So now i can override antd varriables in "src/styles/AntdCustom.less" and import ".less" files (if I don't use them as modules) like: import "./styles/App.less"; And I can also make a "Colors.less" where I can import the default antd colors with @import "~antd/lib/style/color/colors.less"; and add any of my custom colors to it, and use it in any other less file to keep color definitions in one place.

So its working, but I couldn't make it work with TypeScript integration. I will close this now, but if anyone knows how to make it work with TS feel free to reopen it and tell me, or if I figure it out I'll post it here.

DocSpring / craco-antd

Also using .less files with antd #19