rsuite / webpack-multiple-themes-compile Goto Github PK

extract-text-webpack-plugin deprecated

Please use https://github.com/webpack-contrib/mini-css-extract-plugin

Hi :)

Is there any way to configure this plugin to work with CSS Modules enabled?

(I'm using less, if it matters)

Thanks!

Hi!

This issue is already kind of open in rsuite#947, but I thought I should open the issue here (where I think it belongs) with some more details.

I am trying to use webpack-multiple-themes-compile with CRA through react-app-rewired. My packages' versions are:

webpack-merge: 4.2.2,
webpack-multiple-themes-compile: 2.0.0
react-app-rewired: 2.1.6,
react: 16.8.6

And I am trying to override CRA's configuration with the following config-overrides.js (which is a based on this repository's README):

const { override } = require('customize-cra');

const merge = require('webpack-merge');
const multipleThemesCompile = require('webpack-multiple-themes-compile');

module.exports = function override(config, env) {
  // Merge default config with themes config
  return merge(
    config,
    multipleThemesCompile({
      themesConfig: {
        green: {
          color: '#008000'
        },
        yellow: {
          color: '#ffff00'
        }
      },
      lessContent: 'body{color:@color}'
    })
  );
}

But even though the compilation is successful, the application doesn't start as I only see a blank page. I think it is because the entry points of the default config and the ones generated by multipleThemesCompile are not being merged correctly as their definitions don't look compatible. This is how they look:

/* config */
{
  entry: [ '/my/path/node_modules/react-dev-utils/webpackHotDevClient.js', '/my/path/src/index.js' ]
  // more stuff
}

/* result from multipleThemesCompile */
{
  entry: {
    green: '/my/path/node_modules/webpack-multiple-themes-compile/lib/src/less/themes/green.js',
    yellow: '/my/path/node_modules/webpack-multiple-themes-compile/lib/src/less/themes/yellow.js'
  }
  // module, plugins, optimization
}

So the resulting merged object apparently just takes the entry from the latter (I am not writing the other attributes here as they seem to be merged correctly, but as I am no webpack expert, I am not 100% sure) which would explain why my application doesn't load but the css files do seem to load.

I have tried some things like merging manually, merging the entry points with Derek-Hu/react-app-rewire-multiple-entry, but each of them throws different errors.

Is there a workaround for this or am I doing something wrong?

My final goal is to achieve runtime theme switching (like in Rsuite's website) with custom light and dark themes (i.e. light mode with base_color : green and dark mode with base_color : red).

Thanks!

ERROR in (webpack)-multiple-themes-compile/lib/src/less/themes/red.less
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

exports = module.exports = require("../../../../../css-loader/dist/runtime/api.js")(false);
^
Unrecognised input

有 sass版本吗？

created themes css content is null.
Why.
How to resolve it.
Please tell me, thank you.

multipleThemesCompile({
themesConfig: {
green: {
color: '#008000'
},
yellow: {
color: '#ffff00'
}
},
styleLoaders: [
{ loader: 'css-loader' },
{
loader: 'less-loader'
}
],
lessContent: 'body{color:@color}',
cwd: path.resolve('./'),
cacheDir: './src/less/themes',
outputName:themeName => ${themeName}.css
})