css-url-loader
v2.1.0
Published
Webpack loader to transform URLs to other URLs in CSS.
Downloads
383
Maintainers
Readme
css-url-loader
Webpack loader to transform URLs to other URLs in CSS.
Description
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.
Install
npm install --save-dev css-url-loader
Or
yarn add --dev css-url-loader
Usage
When 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'
}
}
],
},
],
},
}
Options
| 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 |