postcss-loader changes the relative path of url() function returned from sass-loader

[tianzhich]

• Operating System: MacOS 10.15.4
• Node Version: v14.5.0
• NPM Version: 6.14.5
• webpack Version: 4.42.0
• postcss-loader Version: 3.0.0

Expected Behavior

I don't want postcss-loader to change the relative path in url(), so it can be resolved by the next css-loader. Is there an option I can use to disable it?

Actual Behavior

The path changed from ../assets/foo.png to ./foo.[hash:20].png. And the file generated in the root of the dist folder.

Code

// webpack.config.js
{
  "exclude": [
    "/Users/tianzhi/dev/nx-examples/libs/shared/styles/src/index.scss",
    "/Users/tianzhi/dev/nx-examples/libs/shared/header/index.scss",
    "/Users/tianzhi/dev/nx-examples/node_modules/normalize.css/normalize.css"
  ],
  "test": "/\\.scss$|\\.sass$/",
  "use": [
    {
      "loader": "/Users/tianzhi/dev/nx-examples/node_modules/@nrwl/web/node_modules/style-loader/dist/index.js"
    },
    {
      "loader": "/Users/tianzhi/dev/nx-examples/node_modules/@nrwl/web/node_modules/css-loader/dist/cjs.js"
    },
    {
      "loader": "/Users/tianzhi/dev/nx-examples/node_modules/postcss-loader/src/index.js",
      "options": { "ident": "embedded", "sourceMap": false }
    },
    {
      "loader": "/Users/tianzhi/dev/nx-examples/node_modules/@nrwl/web/node_modules/sass-loader/dist/cjs.js",
      "options": {
        "implementation": {
          "info": "dart-sass\t1.26.10\t(Sass Compiler)\t[Dart]\ndart2js\t2.8.4\t(Dart Compiler)\t[Dart]",
          "types": {},
          "NULL": {},
          "TRUE": { "value": true },
          "FALSE": { "value": false }
        },
        "sourceMap": false,
        "sassOptions": { "precision": 8, "includePaths": [] }
      }
    }
  ]
},

[alexander-akait]

postcss-loader doesn't touch your url, double check your plugins

[alexander-akait]

Every time when we ask to create reproducible test repo, developers ignore us, but if you look at closed PR by me, you can found around 99% issues resolved by developers when they try to create reproducible test repo, they found problems in own environments and fix it

[tianzhich]

Every time when we ask to create reproducible test repo, developers ignore us, but if you look at closed PR by me, you can found around 99% issues resolved by developers when they try to create reproducible test repo, they found problems in own environments and fix it

Thank you a lot, I used 3rd party tools which hide most of the webpack configs. I only checked the module.rules config so I came with this. I will double-check other configs.

[alexander-akait]

Yes, only css-loader touch url/@import in the basic setup

[tianzhich]

Yes, only css-loader touch url/@import in the basic setup

Yes, but what I am confused about is there was no css-loader in the configs. And after process with sass-loader, the path in the url() was unchanged, but after with postcss-loader, it was touched and modified.

I'm not familiar with webpack like you. Have you ever encountered this? Are there any plugins that touched this? I also fired an issue in the repo of that tool. But if you know that much appreciated.

[alexander-akait]

Have you ever encountered this?

No

Are there any plugins that touched this?

Yes, for example https://github.com/postcss/postcss-url

[tianzhich]

I found that they created an additional plugin to touch this...