Skip to content

Root option on the Windows system. #526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sagorshkov opened this issue May 2, 2017 · 16 comments
Closed

Root option on the Windows system. #526

sagorshkov opened this issue May 2, 2017 · 16 comments

Comments

@sagorshkov
Copy link

sagorshkov commented May 2, 2017

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
Copy link
Member

@sagorshkov can you create minimal reproducible test repo?

@sagorshkov
Copy link
Author

@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
Copy link
Member

@sagorshkov why do your store images not src directory?

@sagorshkov
Copy link
Author

@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
Copy link
Member

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

@sagorshkov
Copy link
Author

@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
Copy link
Author

sagorshkov commented May 2, 2017

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

@alexander-akait
Copy link
Member

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

@alexander-akait
Copy link
Member

@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
Copy link
Member

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

@alexander-akait
Copy link
Member

alexander-akait commented May 2, 2017

/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
Copy link
Member

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

@alexander-akait
Copy link
Member

@michael-ciniawsky this PR #523 should fix this issue because we drop css-selector-tokenizer (bug here) 😄

@alexander-akait
Copy link
Member

but be good add tests for this

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented May 2, 2017

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants