css - 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 文件目录，稍后将通过卸载/加载手动更改 <link直接在 DOM 中，我的灵感来自 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 将与特定主题相关的所有 Assets 打包到一个 block 中:

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 等的 block