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等的块。

CRA + Craco +多个CSS主题

1 个答案: