Webpack loader to transform URLs to other URLs in CSS.
Transform URLs to other URLs in the url()s in your CSS. You can change relative urls to absolute urls, or you can change old urls to new urls that you want.
npm install --save-dev css-url-loaderOr
yarn add --dev css-url-loaderWhen you want to trasform url(/assets/...) to url(https://domain/assets/...), the webpack.config.js is below
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
{
loader: 'css-url-loader',
options: {
from: '/assets/',
to: 'https://domain/assets/'
}
}
],
},
],
}
}When you want to trasform url(/assets/...) to url(/dir/assets/...), the webpack.config.js is below
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
{
loader: 'css-url-loader',
options: {
from: '/assets/',
to: '/dir/assets/'
}
}
],
},
],
},
}When you want to trasform urls when only development env, the webpack.config.js is below
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
{
loader: 'css-url-loader',
options: {
from: '/assets/',
to: '/tmp/assets/',
env: 'development'
}
}
],
},
],
},
}When you want to trasform urls when only development mode, the webpack.config.js is below
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
{
loader: 'css-url-loader',
options: {
from: '/assets/',
to: '/tmp/assets/',
mode: 'development'
}
}
],
},
],
},
}| Option | Description | Required |
|---|---|---|
| from | original url in url() | Yes |
| to | transformed url | Yes |
| env | process when env is equal to process.env.NODE_ENV. Default is 'production'. |
No |
| mode | process when mode is equal to process.env.WEBPACK_MODE. Default is 'production'. |
No |