How to add webpack style-loader nonce attribute to a craco config

Question

I'm trying to add the webpack style-loader nonce attribute to a craco config file, for a create-react-app, like this:

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

but that didn't work. Does anyone if this can be achieved with craco and how?.

Answer 1

Problem

craco doesn't offer you to modify module.rules directly that way.

Solution

Instead it offers you webpack.configure method instead which takes following signature:

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

In order to override style-loader (only support development mode), you would need a few helper functions. Here is the idea for you:

// 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; 
    },
  },
};