如何将 webpack style-loader nonce 属性添加到 craco 配置中

Question

我正在尝试将 webpack style-loader nonce 属性添加到craco 配置文件中，用于 create-react-app，如下所示：

// craco.config.js
module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            {
              loader: "style-loader",
              options: {
                attributes: {
                  nonce: "12345678",
                },
              },
            },
            "css-loader",
          ],
        },
      ],
    },
  },
};

但这没有用。有人知道这是否可以通过 craco 实现以及如何实现吗？

Answer 1

问题

craco不提供您module.rules直接修改的方式。

解决方案

相反，它webpack.configure为您提供了采用以下签名的方法：

configure: (webpackConfig, { env, paths }) => { return webpackConfig; }

为了覆盖style-loader（仅支持development模式），您需要一些辅助函数。这是为您提供的想法：

// Import these helpers to figure out where the current loader located
const { getLoader, loaderByName } = require("@craco/craco");

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => { 
      
      if (env === 'development') {
        // your overridden `style-loader`
        const overrideOptions = {
          loader: "style-loader",
          options: {
            attributes: {
              nonce: "12345678",
            },
          },
        };

        // override `style-loader`
        const { isFound, match } = getLoader(webpackConfig, loaderByName('style-loader'));

        if (isFound) {
          match.parent[match.index] = overrideOptions;
        }
      }

      return webpackConfig; 
    },
  },
};