Css-loader: Root option on the Windows system.

[sagorshkov]

Hello. I'm using root option to resolve relative paths in my css.
My architecture is: css loader uses root option to prepend my dirname's absolute path to the relative URLs in css. After, this URLs resolve with file-loared (file loader is finding the assets using
those absolute path).
For examle I've tried something like this:
options:{
root: __dirname
}
also I've tried:
options:{
root: path.resolve(__dirname)
}
Both of these work well on OS X and Linux systems.
But on Windows don't.
There is next error there:
ERROR in ./~/css-loader?{"root":"C://Projects//project-name","sourceMap":true,"minimize":false}!./~/sass-loader/lib/loader.js!./src/styles/entry.scss .

Module not found: Error: Can't resolve 'C:Projectsproject-name/images/image.png' in 'C:\Projects\project-name\src\styles'

In logs root option is {"root":"C://Projects//project-name"}
But in resolving path it is C:Projectproject-name
Looks like all slashes was removed from URL's prefix of root option.

Could you help me with this issue, please? What I'm doing wrong?
Thanks in advance.

[alexander-akait]

@sagorshkov can you create minimal reproducible test repo?

[sagorshkov]

@evilebottnawi I've created a simple example with my case.
https://github.com/sagorshkov/css-loader-demo
It works on my OS X, but not on my Windows.
Please, let me know if I can do something else.

[alexander-akait]

@sagorshkov why do your store images not src directory?

[sagorshkov]

@evilebottnawi It's a long story)) It's a simple example, but I need to use relative paths in the sass and get absolute paths in result CSS. I found only one way to do it - using css-loader's root option and got this case((

[alexander-akait]

@sagorshkov absolute path => http://domain.com/path/to/image.jpg or /path/to/image.jpg?

[sagorshkov]

@evilebottnawi Sorry, more precisely so: in sass I have to use "/images/" paths, and in the result CSS I need to get path relative to this CSS file, something like this "../assets/images/". Because of For URLs that start with a /, the default behavior is to not translate them, I use root option.

[sagorshkov]

And to resolve this asset I use absolute path to working directory as root option.

[alexander-akait]

@sagorshkov on linux works as expected https://github.com/sagorshkov/css-loader-demo ?

[alexander-akait]

@sagorshkov seems bug in https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L125
values

[ { type: 'url',
    url: 'C:UsersIEUser\rownloads\fss-loader-demo-master/images/star.png' } ]
[ { type: 'url',
    url: 'C:UsersIEUser\rownloads\fss-loader-demo-master/images/star.png' } ]

[alexander-akait]

/cc @michael-ciniawsky should we wait new css-loader or try to fix now?

[alexander-akait]

/cc @sagorshkov also https://github.com/sagorshkov/css-loader-demo/blob/master/webpack.config.js#L47 seems not compatibility with windows paths https://regex101.com/r/CZg28i/1, just use \.(png|jpg|svg|ttf|eot|woff|woff2)$

[michael-ciniawsky]

depending if you have something in mind to fix it already 😛 everything we can fix let's fix it nevertheless

[alexander-akait]

@michael-ciniawsky this PR https://github.com/webpack-contrib/css-loader/pull/523 should fix this issue because we drop css-selector-tokenizer (bug here) :smile:

[alexander-akait]

but be good add tests for this

[michael-ciniawsky]

Just ping for review when ready :D LTGM so far, btw I think I will port it to my originally proposed v1.0.0 branch and I think it's still a good idea to keep it alive in one way or another for now 😛 postcss-loaderwould be initially ready for AST hand off, I will still try this all out later today :D

[alexander-akait]

Please don't use root option, it will be removed in 1.0.0, use https://github.com/postcss/postcss-url