Use with react-app-rewired #41

hbj · 2018-08-20T14:31:16Z

I'm trying to use the plugin with 'react-app-rewired' and I have succeeded to use it to customize the theme, but if I import theme.scss and try to use Ant Design's variables I get 'Undefined variable' errors (I can only use the ones I have defined in the file).

Here is my config-overrides.js file:

const { getLoader, injectBabelPlugin } = require('react-app-rewired');
const rewireSass = require('react-app-rewire-scss');
const rewireLess = require('react-app-rewire-less');
const rewireEslint = require('react-app-rewire-eslint');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');

module.exports = function override(config, env) {
  // use babel-plugin-import to import antd components
  config = injectBabelPlugin(
    [
      'import',
      {
        libraryName: 'antd',
        style: true
      }
    ],
    config
  );

  // add scss support
  config = rewireSass(config, env);

  // add less support to antd
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true
  })(config, env);

  // override eslint config
  config = rewireEslint(config, env);

  // inject plugin to overrride antd theme with sass
  config = injectBabelPlugin(new AntdScssThemePlugin('./theme.scss'), config);

  // 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));
  }
}

The text was updated successfully, but these errors were encountered:

prncc · 2018-08-21T21:49:48Z

Heya, AntdScssThemePlugin is actually a Webpack plugin, so using it with injectBabelPlugin shouldn't work. I'll close the issue for now, but please feel free to reopen if after editing your config you're still getting errors.

ghost · 2018-11-11T20:24:33Z

If anyone else ends up here, I was able to get it working by slightly modifying @hbj's config (CRA2 has support for SCSS out of the box)

EDIT: spoke too soon... overriding color variables works, but importing them doesn't. If anyone has figured it out, please share.

const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');

module.exports = function override(config, env) {
  console.log('overriding!')
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
    config
  );

  // add less support to antd
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true
  })(config, env);
  
  config.plugins.push(new AntdScssThemePlugin('./theme.scss'));

  // override the less loader to use the ones from AntdScssThemePlugin
  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));
  }
}

vi-cat · 2018-11-12T16:01:00Z

I have been here recently. I found out that if the themes.scss file has multi-line comments, the parsing from SCSS to JSON will fail.

ndeviant · 2019-03-29T11:07:43Z

If anyone else ends up here, I was able to get it working by slightly modifying @hbj's config (CRA2 has support for SCSS out of the box)

EDIT: spoke too soon... overriding color variables works, but importing them doesn't. If anyone has figured it out, please share.

const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');

module.exports = function override(config, env) {
  console.log('overriding!')
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
    config
  );

  // add less support to antd
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true
  })(config, env);
  
  config.plugins.push(new AntdScssThemePlugin('./theme.scss'));

  // override the less loader to use the ones from AntdScssThemePlugin
  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));
  }
}

Could that be cause of you need to wrap SASS loader as you did with LESS? https://github.com/intoli/antd-scss-theme-plugin#step-2-use-antd-scss-theme-plugin-in-your-webpack-setup

uturnr · 2020-01-12T01:20:53Z

In case this helps anyone else, this is my config with customize-cra. I tried the above examples first, but some of the functions used have been deprecated in react-app-rewired.

It's a bit rough, but it's a start:

const {
  addLessLoader,
  addWebpackPlugin,
  adjustStyleLoaders,
  fixBabelImports,
  override,
} = require('customize-cra');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
  }),
  addWebpackPlugin(new AntdScssThemePlugin('./src/theme.scss')),
  adjustStyleLoaders(rule => {
    const loaders = rule.use;
    const newUse = [];
    loaders.forEach(loaderObj => {
      if (typeof loaderObj === 'object') {
        var renamedLoader = null;
        if (loaderObj.loader.indexOf('sass-loader') !== -1) renamedLoader = 'sass-loader';
        if (loaderObj.loader.indexOf('less-loader') !== -1) renamedLoader = 'less-loader';
        if (renamedLoader) {
          loaderObj.loader = renamedLoader;
          newUse.push(AntdScssThemePlugin.themify(loaderObj));
        } else {
          newUse.push(loaderObj);
        }
      } else {
        newUse.push(loaderObj);
      }
    })
    rule.use = newUse;
    return rule;
  }),
);

As with @ghost, I am finding that only overriding variables is working. There are some other issues that I'm not sure are to do with this config or not.

Can't import other scss files into theme.scss without getting an error (Related? Could not compile the SCSS theme file "../scss/app.scss" for the purpose of variable extraction #60, Import of another scss is not working #52, Prepare config for distribution #1)
Can't use the antd less variables (Related? Less variables not being imported #63)
No hot reloading

exzizt · 2020-01-19T05:57:00Z

I have been here recently. I found out that if the themes.scss file has multi-line comments, the parsing from SCSS to JSON will fail.

Still an issue.

MildTomato · 2020-02-10T13:27:35Z

Can anyone help with this?

The above solutions are not working.
@uturnr solution also returns sass errors

./src/App.scss (./node_modules/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--6-oneOf-5-1!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??postcss!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--6-oneOf-5-3!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--6-oneOf-5-4!./src/App.scss)
Could not compile the SCSS theme file "./src/theme.scss" for the purpose of variable extraction. This is likely because it contains a Sass error.

uturnr · 2020-02-10T19:15:42Z

@MildTomato I have encountered that error at times as well, depending on what's in my theme.scss file. I was able to make it work for me, but I had to forego using many sass features in the file, including importing other files into my theme.scss. What I am able to do successfully is define new sass variables (and use them in my other sass files), and override antd variables.

If you're okay with dealing with the limitations, I'd suggest testing to see if it works for you with just one override, say for $primary-color. If that works, you might be able to figure out by trial and error what's tripping it up.

MildTomato · 2020-02-11T12:56:41Z

@uturnr cheers 🚀 I don't think I was using any imports at all, think I had it with just one variable.
I'll check again and report back.

The import thing isn't really much of an issue, i suppose the same same scss variables could be used elsewhere, so it's not all bad 😄

got this weird feeling that I might had been using less syntax in theme.scss

MildTomato · 2020-02-11T16:44:08Z

@uturnr so, I progressed it a little bit.
i had an import in my original theme.scss file that seemed to be breaking it.

Now I'm getting this error haha
trying to figure out what it means

./src/theme.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdSassLoader.js??ref--6-oneOf-5-4!./src/theme.scss)
Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'importer'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }```

uturnr · 2020-02-11T17:01:27Z

@MildTomato Maybe it is trying to use sass-loader 8, which the latest react-scripts depends on. I don't believe this library is compatible yet. Perhaps try installing ^7.3.0.

MildTomato · 2020-04-12T12:24:11Z

Got it working!

Anyone got any tips to make antd-scss-theme-plugin work with GatsbyJS?

kaje94 · 2020-04-12T12:34:49Z

@MildTomato , How to you get it to work?

MildTomato · 2020-04-12T12:51:37Z

Oh, got it working.

There's some funny stuff that comes up with formatting of scss.

/* theme.scss */
$primary-color: #fe8019;

the above fails to compile. but if you comment the 1st line like..
// theme.scss
it works

denistex · 2020-05-04T16:45:12Z

I was able to get it working with rescripts and a fork of the plugin by atb-tech. In case this helps anyone else, here is the re-script: https://gist.github.com/fppden/689cc39ca68cf329eb9c32c155187ef6

sammyers · 2020-05-05T02:23:29Z

Don't know if this is the only problem at play, but I was able to get this to work by changing the theme path that gets passed to the plugin constructor to an absolute path (new AntdScssThemePlugin(path.resolve(__dirname, "./src/theme.scss")) or something similar). There's a path equality check in antdSassLoader.js that fails to inject the theme variables into your stylesheets, at least in my case, when the theme path is relative. Hope this helps someone!

realjesset · 2020-07-09T11:41:24Z

Don't know if this is the only problem at play, but I was able to get this to work by changing the theme path that gets passed to the plugin constructor to an absolute path (new AntdScssThemePlugin(path.resolve(__dirname, "./src/theme.scss")) or something similar). There's a path equality check in antdSassLoader.js that fails to inject the theme variables into your stylesheets, at least in my case, when the theme path is relative. Hope this helps someone!

could you perhaps share your config-overrides.js file so I can look into it? thanks would help a lot

prncc closed this as completed Aug 21, 2018

uturnr mentioned this issue Jan 12, 2020

Problem with PROD build with react-app-rewired #47

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use with react-app-rewired #41

Use with react-app-rewired #41

hbj commented Aug 20, 2018 •

edited

Loading

prncc commented Aug 21, 2018

ghost commented Nov 11, 2018 •

edited by ghost

Loading

vi-cat commented Nov 12, 2018

ndeviant commented Mar 29, 2019

uturnr commented Jan 12, 2020 •

edited

Loading

exzizt commented Jan 19, 2020

MildTomato commented Feb 10, 2020 •

edited

Loading

uturnr commented Feb 10, 2020

MildTomato commented Feb 11, 2020 •

edited

Loading

MildTomato commented Feb 11, 2020

uturnr commented Feb 11, 2020

MildTomato commented Apr 12, 2020

kaje94 commented Apr 12, 2020

MildTomato commented Apr 12, 2020 •

edited

Loading

denistex commented May 4, 2020

sammyers commented May 5, 2020

realjesset commented Jul 9, 2020

Use with react-app-rewired #41

Use with react-app-rewired #41

Comments

hbj commented Aug 20, 2018 • edited Loading

prncc commented Aug 21, 2018

ghost commented Nov 11, 2018 • edited by ghost Loading

vi-cat commented Nov 12, 2018

ndeviant commented Mar 29, 2019

uturnr commented Jan 12, 2020 • edited Loading

exzizt commented Jan 19, 2020

MildTomato commented Feb 10, 2020 • edited Loading

uturnr commented Feb 10, 2020

MildTomato commented Feb 11, 2020 • edited Loading

MildTomato commented Feb 11, 2020

uturnr commented Feb 11, 2020

MildTomato commented Apr 12, 2020

kaje94 commented Apr 12, 2020

MildTomato commented Apr 12, 2020 • edited Loading

denistex commented May 4, 2020

sammyers commented May 5, 2020

realjesset commented Jul 9, 2020

hbj commented Aug 20, 2018 •

edited

Loading

ghost commented Nov 11, 2018 •

edited by ghost

Loading

uturnr commented Jan 12, 2020 •

edited

Loading

MildTomato commented Feb 10, 2020 •

edited

Loading

MildTomato commented Feb 11, 2020 •

edited

Loading

MildTomato commented Apr 12, 2020 •

edited

Loading