color.less file not found in production (404)

[barbarossusuz]

In production, app cannot find any color.less file (https://mysite.com/color.less 404) but in development there is no problem, everything works fine. Is there any idea why this is happening.

Show your code

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const { getLessVars } = require('antd-theme-generator');
const defaultVars = getLessVars(path.join(__dirname, './path/defaultVars.less'));
const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './path'),
  varFile: path.join(__dirname, './path/defaultVars.less'),
  themeVariables: Object.keys(defaultVars),
  generateOnce: false, // generate color.less on each compilation
};
const plugin = new AntDesignThemePlugin(options);

mule.exports = function (config, env) {
  const newConfig = Object.assign(config, override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: defaultVars
    }),

    addWebpackPlugin(plugin),

    )(config, env)
  );

  newConfig.devtool= 'source-map';

  return newConfig;
};

Version "antd-theme-generator": "^1.2.4", "antd-theme-webpack-plugin": "^1.3.6", "less": "2.7.2", "antd": "^4.2.0",

[mzohaibqc]

There must be some issue with your website configuration or path at which app is deployed.

e.g. if your app is deployed at https://somedomain.com/myapp then you need to prepend /myapp before color.less path. so it will be

This can be achieved my using paramter publicPath: '/myapp'

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './path'),
  varFile: path.join(__dirname, './path/defaultVars.less'),
  themeVariables: Object.keys(defaultVars),
  publicPath: '/myapp',   // <------------------------------------------------------------- Here
  generateOnce: false, // generate color.less on each compilation
};

Or if you are using create-react-app then add this line in index.html

here PUBLIC_URL is an environment variable which you can pass using inline command argument like

PUBLIC_URL=myapp npm run build

or you can create a .env file and add there

// .env

PUBLIC_URL = 'myapp';

and then simply run

npm run build

and that variable will be injected by CRA.

[barbarossusuz]

You are awesome thank you for response, it did work. However, I am faced with a new problem.

When browser trying to call color.less, in response preview says "You need to enable JavaScript to run this app."

but i have already activated in config. addLessLoader({ javascriptEnabled: true, modifyVars: defaultVars }),

and here the html in production:

but in development i can clearly see the styles in html

and there is a warning in my console , i think it gives this warning because it cannot read the less file.

btw, i can see color.less file in build folder.

Thank you again, great work.

[mzohaibqc]

@barbarossusuz No idea.

I would say, just copy the example code and see if it works or not.

[yanlee26]

There must be some issue with your website configuration or path at which app is deployed.

e.g. if your app is deployed at https://somedomain.com/myapp then you need to prepend /myapp before color.less path. so it will be

This can be achieved my using paramter publicPath: '/myapp'

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './path'),
  varFile: path.join(__dirname, './path/defaultVars.less'),
  themeVariables: Object.keys(defaultVars),
  publicPath: '/myapp',   // <------------------------------------------------------------- Here
  generateOnce: false, // generate color.less on each compilation
};

Or if you are using create-react-app then add this line in index.html

here PUBLIC_URL is an environment variable which you can pass using inline command argument like

PUBLIC_URL=myapp npm run build

or you can create a .env file and add there

// .env

PUBLIC_URL = 'myapp';

and then simply run

npm run build

and that variable will be injected by CRA.

I do not think this is a good solution

[mzohaibqc]

@yanlee26 Do you have an alternate/better solution?