File won't be packed and no error tip when use absolute path in url()

[NE-SmallTown]

Do you want to request a feature or report a bug?
Bug.

What is the current behavior?

// webpack.config
{
   test: /\.less$/,
   use: [{
       loader: 'css-loader',
       query: {
          importLoaders: 1,
          minimize: !isDevEnv,
          sourceMap: isDevEnv,
       },
      { loader: 'less-loader' }
   }]
}

// index.less
@import './iconfont.css'

// iconfont.css
@font-face {
  font-family: "iconfont";
  src: url('/src/assets/font/iconfont.eot'); 
  // ...
}

If so, the iconfont.eot won't be packed to a module/file to the dist directory and won't be added to the devServer when I request the page.

If I add an option/query such as root: process.cwd() or alias: {'/src': '../../../'} to the css-loader, the iconfont.eot will be packed to the dist directory but still won't be added to the devServer when I request the page because the url in iconfont.css still is '/src/assets/font/iconfont.eot' rather than '/static/assets/font/iconfont.eot'. But if I use relative path like '../../../assets/font/iconfont.eot' in the url(...), it will automatically transform the '/src/assets/font/iconfont.eot' -> '/static/assets/font/iconfont.eot'

Another question it will not throw an Error like can't find the module '/src/assets/font/iconfont.eot'(seems like begin with '~/' or '/' will cause no throw) in xxxx. This is a little bad. If I use relative path and give it a wrong path, it will throw.

By the way, seems like this is not about less or less-loader, the problem still exists even I just use css.

If the current behavior is a bug, please provide the steps to reproduce.

See above.

What is the expected behavior?
It will works even I use absolute path.

I have searched on google and webpack/css-loader/postcss issues, and have tried many workaround such as resolve.modules, options.url, options.root, options.alias, all of them can'r resolve this.

Have not tried postcss-url or resolve-url-loader, but I think that's not the key because I wan't to know why this won't work rather than how to make it works.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
MacOs
Node 8.11.3
Webpack 3.12.0
css-loader 0.28.9

Thanks.

[alexander-akait]

@NE-SmallTown please create minimum reproducible test repo

[zhangolve]

same question

[alexander-akait]

Please create minimum reproducible test repo

[NE-SmallTown]

Sorry for too busy, I will provide the repo this weekend if you don't mind

[NE-SmallTown]

@ekulabuhov ping~

clone https://github.com/NE-SmallTown/css-loader-absolute-path-test and run npm start

I add exclude: file => console.log(11111, file) in the test: /\.(png|jpg|gif|svg|ttf|woff|eot)$/

If I don't add root: process.cwd() to the query of extractLESS.extract, the build is:

and there is no console

If I add root: process.cwd() to the query of extractLESS.extract, the build is:

[padakuro]

I just hit the same problem and could track it down to this line in processCss.js.

if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url)) {
// ...
}

The check loaderUtils.isUrlRequest(item.url) will return false for absolute paths (see here) so the URL is ignored. Removing this check will handle absolute filesystem paths as expected and webpack is able to rewrite them accordingly.

I'm not sure if removing that has any other unintentional effects, but it works for me.

[NE-SmallTown]

@padakuro https://github.com/webpack/loader-utils/blob/master/lib/isUrlRequest.js#L4-L7 , seems intended

[NE-SmallTown]

@evilebottnawi ping~

[NE-SmallTown]

@evilebottnawi Friendly ping~, do you have time to look at this? If no, please give some response because maybe others want to start work on this :)

[alexander-akait]

@NE-SmallTown i am working on css-loader@2 right now (icss - ext css modules), feel free to send a PR with fix

[alexander-akait]

@NE-SmallTown Can you provide what url you have and what expected?

[NE-SmallTown]

@evilebottnawi Cool, will look at whether it's been fixed in 2.0 and will dig into the bug this weekend.
Current: '/src/assets/font/iconfont.eot'
Expected: '/static/assets/font/iconfont.eot'
But the other problem is if use absolute path the assets won't be packed. You can view before comment for more details.

[NE-SmallTown]

@evilebottnawi Hi, friendly ping~ ,There is no branch for '0.x' versions, since the alias option has been removed in 1.0, how should I send a pr to fix it in 0.x?

[alexander-akait]

@NE-SmallTown no, better use latest version

[NE-SmallTown]

Ok, close