intoli / antd-scss-theme-plugin

A Webpack plugin for customizing Ant Design with an SCSS theme file and using Ant Design's compiled variables in SCSS files throughout your project.
https://intoli.com/blog/antd-scss-theme-plugin/
Other
202 stars 80 forks source link

Plugin doesn't work with sass-loader v8 and above and less-loader v6 and above #82

Open nad182 opened 4 years ago

nad182 commented 4 years ago

Spend hours trying to get the plugin to work. Seems like sass-loader and less-loader both changed their options object shapes. I got to the bottom of the issue by exploring antdSassLoader.js and antdLEssLoader.js.

  1. antdSassLoader.js (the error was something like options has an unknown property 'importer') The issue there is that there is no importer prop in options anymore, it's in sassOptions. So should be something like this:

    newOptions.sassOptions = {}
    newOptions.sassOptions.importer = importer
  2. antdLEssLoader.js (the error was something like options has an unknown property 'modifyVars') The issue here is that modifyVars was moved inside lessOptions prop and you also must pass javascriptEnabled: true (without is the error you're getting is (Inline JavaScript is not enabled. Is it set in your options?) to lessOptions like this:

    const newOptions = _extends({}, options, {
    lessOptions: {
      modifyVars: _extends({}, themeModifyVars, options.modifyVars || {}), 
      javascriptEnabled: true
    }
    });

Without those changes, you're getting a bunch of different errors.

Screenshots of "successful" configs are attached.

Screen Shot 2020-07-28 at 12 20 33 AM Screen Shot 2020-07-28 at 12 19 57 AM
kbouchard commented 3 years ago

+1

igor-lemon commented 2 years ago

I made a PR but it looks like the author doesn't want to support https://github.com/intoli/antd-scss-theme-plugin/pull/119

As alternative you can use https://github.com/igor-lemon/antd-scss-theme-plugin or full completely craco solution https://github.com/igor-lemon/craco-antd-scss