CRA + Craco +多个CSS主题

Question

文件夹结构：

src/index.tsx
src/themes/dark.scss
src/themes/light.scss
...

craco webpack修改：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.entry.push(
        path.join(process.cwd(), "src/themes/dark.scss"),
        path.join(process.cwd(), "src/themes/light.scss")
      );

      webpackConfig.module.rules.splice(1, 0, {
        test: /\.themes\/dark.scss$/,
        use: [
           { loader: require.resolve('sass-loader') },
           { loader: require.resolve('css-loader') }
        ]
      });

      webpackConfig.module.rules[3].oneOf[5].exclude = /\.(module|themes)\.(scss|sass)$/;
      webpackConfig.module.rules[3].oneOf[6].exclude = /\.themes\.(scss|sass)$/;
      webpackConfig.module.rules[3].oneOf[7].exclude.push(/\.themes\.(scss|sass)$/);

      return webpackConfig;
    }
  }
};

我的意图是显而易见的-我们试图从src/themes目录中生成两个主题css文件，稍后将通过直接在DOM中卸载/加载<link进行手动更改，我的灵感来自于Output 2 (or more) .css files with mini-css-extract-plugin in webpack和https://github.com/terence55/themes-switch/blob/master/src/index.js。

现在麻烦来了-在构建过程之后：

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  122.24 KB  build/static/css/2.2e93dcba.chunk.css
  762 B      build/static/js/runtime~main.a8a9905a.js
  191 B      build/static/css/main.d0c4fa77.chunk.css
  157 B      build/static/js/main.2063d3e0.chunk.js
  109 B      build/static/js/2.9b95e8c0.chunk.js

(CSS文件还可以，一般的CSS文件很少，而且很少有来自库的文件)。但是没有theme文件...我尝试与file-loader结合，但它也不起作用。

Answer 1

我建议将webpack配置为将与特定主题相关的所有资产打包到单个块中：

const themeFileRegex = /(\w+)\.theme\.(scss|sass)$/;

// recursively searches for a theme stylesheet in parent issuers
function getIssuerTheme(module) {
  const matches = themeFileRegex.exec(module.resource);
  if (matches) {
    return matches[1];
  } else {
    return module.issuer && getIssuerTheme(module.issuer);
  }
}

...

webpackConfig.optimization.splitChunks.cacheGroups = {
    ...webpackConfig.optimization.splitChunks.cacheGroups,
    themes: {
       test: getIssuerTheme,
       name: m => {
         const name = getIssuerTheme(m);
         return `theme.${name}`;
       },
       reuseExistingChunk: false,
     },
   };

这样，您应该可以获得名为theme.light、theme.dark等的块。