App does not compile when using an index.less file and config-overrides.js example

[wworrall]

Hi,

As above, when overriding antd theme using an index.less file in conjunction with the config-overrides.js example to avoid importing styles twice as stated in the README, the app wont start. I get the following output:

> ampr-client@0.1.0 start /home/will/Documents/ampr/ampr-app/ampr-client
> react-scripts-ts-antd start

options/query provided without loader (use loader + options) in {
  "test": {},
  "include": "/home/will/Documents/ampr/ampr-app/ampr-client/src",
  "use": [
    {
      "loader": "/home/will/Documents/ampr/ampr-app/ampr-client/node_modules/ts-loader/index.js",
      "options": {
        "transpileOnly": true
      }
    }
  ],
  "options": {
    "transpileOnly": true
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ampr-client@0.1.0 start: `react-scripts-ts-antd start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ampr-client@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/will/.npm/_logs/2018-10-05T15_18_05_943Z-debug.log

Any help would be greatly appreciated.

[martin-braun]

@SZzzzz Hi, you closed the issue recently, but I can confirm that this is not fixed in the latest npm package. Did you fix it and it's not released so far? If so, when will the new version be published?

PS. Thanks for the great tool. I love using Antd without opting out.

[martin-braun]

Okay, I fixed it on my own. It seems the issue is the options in the provided code are set on the wrong level object, it needs to be set on the first index of the use array of it.

This works:

// config-overrides.js
const { getLoader } = require("react-app-rewired");
const tsImportPluginFactory = require('ts-import-plugin');

module.exports = function override(config, env) {

	// get tsloader
	const tsloader = getLoader(
		config.module.rules,
		rule => String(rule.test) == String(/\.(ts|tsx)$/)
	);

	// set new options
	tsloader.use[0].options = {
		transpileOnly: true,
		getCustomTransformers: () => ({
			before: [
				tsImportPluginFactory([
					{
						libraryName: 'antd',
						libraryDirectory: 'lib',
					},
					{
						libraryName: 'antd-mobile',
						libraryDirectory: 'lib',
					}
				])
			]
		})
	}
	return config;
};

Now the styles won't load on it's own, which is what we want.

Just create your modified theme version (index.less) now:

@import "~antd/dist/antd.less";
@primary-color: #F00;

and import it in the index.tsx:

import './index.less';

[vidur149]

@MartyMaro wont writing this @import "~antd/dist/antd.less"; include all the styles that are there in antd.

Reference AntD

We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.

[martin-braun]

@MartyMaro wont writing this @import "~antd/dist/antd.less"; include all the styles that are there in antd.

Reference AntD

We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.

Unfortunately, you are right. Requiring the less file will package all styles of AntD. But afaik, this is the only way to do it, without ejecting and I don't think it's too terrible if you use over 50% of all components nonetheless. If you use only a few, it might be better to simply build a scss file that overrides styles explicitly.