antd-scss-theme-plugin
antd-scss-theme-plugin copied to clipboard
Problem with PROD build with react-app-rewired
Hi everyone,
With the following config-overrides.js
, I can run the application in dev mode no problem. However, when I make a prod build (npm run build
) the theme overrides don't happen. There are no errors. Help.
const path = require('path');
const { compose, getLoader, injectBabelPlugin } = require('react-app-rewired');
const rewireSass = require('react-app-rewire-scss');
const rewireLess = require('react-app-rewire-less');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');
function addAliases(config, env) {
return {
...config,
resolve: {
alias: {
assets: path.resolve(__dirname, 'src/assets/'),
theme: path.resolve(__dirname, 'src/theme/')
}
}
};
}
function addStyling (config, env) {
// use babel-plugin-import to import antd components
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
config
);
// add scss support
config = rewireSass.withLoaderOptions({
includePaths: [path.resolve(__dirname, 'src/theme/')]
})(config, env);
// add less support to antd
config = rewireLess.withLoaderOptions({
javascriptEnabled: true,
importLoaders: 1
})(config, env);
// inject plugin to overrride antd theme with sass
config.plugins = [
...config.plugins,
new AntdScssThemePlugin(path.resolve(__dirname, 'src/theme/_theme.scss'))
]
// override the sass and less loaders to use the ones from AntdScssThemePlugin
themify(config, '.scss', 'sass-loader');
themify(config, '.less', 'less-loader');
return config;
};
// override a loader with the one from AntdScssThemePlugin
function themify(config, ext, loaderName) {
const rule = getLoader(
config.module.rules,
rule => rule.test && rule.test.test(ext)
);
const loader =
rule && rule.use && rule.use.find(item => item.loader === loaderName);
if (loader) {
Object.assign(loader, AntdScssThemePlugin.themify(loader));
}
}
module.exports = compose(
addAliases,
addStyling,
);
I shared my config using customize-cra
here: https://github.com/intoli/antd-scss-theme-plugin/issues/41#issuecomment-573370702
My prod build seems to be working.
@virginc Does @uturnr's config work for you?