webpack url-loader seems not working when handling the images files imported using `url()` CSS function

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

[shahnawaz]

Is there any update on this issue?

Unable to load fonts using url.

[patrikniebur]

I moved my css imports from App.tsx to workspace.json’s styles, no more warnings.

Thanks, this helped my use case. Font icons referenced in the css file I was using did not load. I was importing styles from semantic-ui and adding it into the workspace.json project styles like this fixed my problem:

"styles": ["node_modules/semantic-ui-css/semantic.min.css"],