Closed zhangolve closed 5 years ago
+1 Same problem here
Edit: I have manage to make it work with custom url function. @zhangolve your scenario could be:
// postcss.config.js
module.exports = {
plugins: {
'postcss-url': {
url: (asset) => {
if (asset.url[0] === '/') {
return `static${asset.url}`;
}
return asset.url;
}
}
}
}
@Nialaren let me try your solution. thank you.
@Nialaren
I tried your solution and found a better one for me .
First , I copied your code and tried it ,but failed to get these images show. But I now the background image url was actually changed, So the thinking is good.
Then , I changed your code like below:
// postcss.config.js
module.exports = {
plugins: {
'postcss-url': {
url: (asset) => {
if (asset.url[0] === '/') {
return `/static${asset.url}`;
}
return asset.url;
}
}
}
}
After I built it, these images can show .But I found url-loader can not work because the background image url was absolute url, can it can not parse it.
I googled some question about how to handle absoulte url with url-loader , like Unable to resolve absolute url() paths for background images in CSS with Webpack , and finally get a better solution:
here is my solution:
// postcss.config.js
module.exports = {
plugins: {
'postcss-url': {
url: asset => {
if (asset.url[0] === '/') {
return `~static${asset.url}`;
}
return asset.url;
}
}
}
}
of course, before that change, I have added a alias in my webpack.config.js
// webpack.config.js
const STATIC_PATH = path.resolve(__dirname, 'static');
.....
....
return {
resolve: {
alias: {
static: STATIC_PATH,
}
}
}
I would close the issue and hope my solution about the question can help others.
I have a project using webpack and css-loader . In the old days, I use css-loader 0.28,that module can config like below:
and I have many css files , so when I want to load images ,I can write something like below in css:
actually , the background image path is static/mobile/img/menu-icons/01.png.
But when css-loader upgraded to v1.0.0,it removed root option, and recommanded us using postcss-url,I try to understand your docs But also not fully get it to solve my problem.
I wrote some code in my postcss.config.js file
But not work. every time I build finish ,I just found background image path is /mobile/img/menu-icons/01.png ,that is not what I want .