antd-scss-theme-plugin icon indicating copy to clipboard operation
antd-scss-theme-plugin copied to clipboard

Problem with PROD build with react-app-rewired

Open vi-cat opened this issue 5 years ago • 2 comments

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,
);

vi-cat avatar Nov 12 '18 16:11 vi-cat

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.

uturnr avatar Jan 12 '20 01:01 uturnr

@virginc Does @uturnr's config work for you?

sangaline avatar Jan 12 '20 20:01 sangaline