recompile after editing `.less` files?

[EnixCoda]

Thank you for this awesome project, It saved me a lot of time!

I'm using it to configure custom themes for my app and noticed that editing theme's *.less file won't trigger webpack's recompilation. I have to restart the webpack process to see the result.

Is it possible to make recompile for *.less files work?

[ndbroadbent]

Hi @EnixCoda, sorry for the delay, and that's a great point! Unfortunately these variables are being loaded when webpack starts, and are passed to less-loader with the modifyVars option. So this is happening at the webpack config level on initialization, and the file is not being loaded dynamically at compile time. But I'm going to take a look at these webpack compiler hooks, and I might even be able to set up a file watcher and dynamically update the config. Will let you know if I can get that working.

I also wanted to mention that I've just released version 1.6.0, which has some important fixes for production builds, and now I'm matching the development/production config from the Sass loader. (See this craco-less issue for more details.)

[ndbroadbent]

Hi @EnixCoda, I looked into the reloading issue, and unfortunately it can't be done in webpack. However, you can install nodemon and wrap your craco start command so that it restarts whenever you change the custom theme file.

I've added a section to the README: https://github.com/FormAPI/craco-antd#reload-custom-variables-during-development

Hope that helps!

[whazor]

I could not get hot reloading to work for carco-antd, but I did succeed in getting hot reloading to work for craco-less.

Here I ignore antd from the webpack watchers and I convert my theme file to less variables and make sure all the hot reload stuff is working.

const CracoLessPlugin = require('craco-less');
const path = require("path");

module.exports = {
  plugins: [{
    plugin: CracoLessPlugin,
    options: {
      lessLoaderOptions: {
        appendData: (loaderContext) => {
          loaderContext.addDependency(path.resolve(__dirname, "./src/theme.js"));
          loaderContext.cacheable(true);
          delete require.cache[require.resolve('./src/theme')];
          const {theme} = require("./src/theme");
          return Object.entries(theme).map(([k, v]) => '@' + k + ':' + v + ';').join("\n");
        },
        lessOptions: {
          javascriptEnabled: true,
        }
      }
    }
  }]
};

theme.js (also supported by ThemeProvider from styled-components):

exports.theme = {
  "primary-color": "#2f3161", // primary color for all components
  "link-color": "#aaaec9", // link color
  "success-color": "#52c41a", // success state color
  "warning-color": "#ebc44f", // warning state color
  "error-color": "#f5222d", // error state color
  "font-size-base": "15px", // major text font size
  "heading-color": "rgb(45,47,93)", // heading text color
  "text-color": "rgb(47,49,98)", // major text color
  "text-color-secondary": "rgb(180,184,208)", // secondary text color
  "disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
  "border-radius-base": "2px", // major border radius
  "border-color-base": "#d9d9d9", // major border color
  "box-shadow-base": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), " +
    "0 9px 28px 8px rgba(0, 0, 0, 0.05)", // major shadow for layers
}

style.less (required because directly importing antd doesnt seem to work)

@import "~antd/dist/antd.less";

App.js

import "../../theme.less";

[millievn]

You can just use nodemon to watch .less file change and restart app. But it may add more running time.