Current Behavior

I am using the NX with react, webpack used for building my app. But I found that the url-loader configured in @nrwl/react/plugin/webpack.js not working when images imported using url() CSS function.

But the assets imported by this seem handled by file-loader(i am not sure, just see them in dist), but the hash in the filename is greater than 7 digits, and it smaller than 10000bytes which should have been handled by url-loader.

BTW, the files imported in my .ts file handled by url-loader properly.

The url-loader config:

{
  "rules": [
    {
      "test": /\.(png|jpe?g|gif|webp)$/,
      "loader": require.resolve("url-loader"),
      "options": {
        "limit": 10000,
        "name": "[name].[hash:7].[ext]"
      }
    },
    {
      "test": /\.svg$/,
      "oneOf": [
        // If coming from JS/TS file, then transform into React component using SVGR.
        {
          "issuer": {
            "test": /\.[jt]sx?$/
          },
          "use": [
            "@svgr/webpack?-svgo,+titleProp,+ref![path]",
            {
              "loader": require.resolve("url-loader"),
              "options": {
                "limit": 10000,
                "name": "[name].[hash:7].[ext]",
                "esModule": false
              }
            }
          ]
        },
        // Fallback to plain URL loader.
        {
          "use": [
            {
              "loader": require.resolve("url-loader"),
              "options": {
                "limit": 10000,
                "name": "[name].[hash:7].[ext]"
              }
            }
          ]
        }
      ]
    }
  ]
}

Expected Behavior

These assets should handled by url-loader if the size is smaller than 10000 bytes, otherwise should be handled by file-loader which outputs the file, contain 7 digits hash in the file name.

Steps to Reproduce

You can add a background image in nx-emaples and run nx build --prod. You will see the result.

Failure Logs

Environment

nx : Not Found
@nrwl/angular : 10.3.1-beta.1
@nrwl/cli : 10.3.1-beta.1
@nrwl/cypress : 10.3.1-beta.1
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 10.3.1-beta.1
@nrwl/linter : 10.3.1-beta.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : 10.3.1-beta.1
@nrwl/schematics : Not Found
@nrwl/tao : 10.3.1-beta.1
@nrwl/web : 10.3.1-beta.1
@nrwl/workspace : 10.3.1-beta.1
typescript : 4.0.3