Webpack loader to transform URLs to other URLs in CSS. Fork from css-url-loader
Transform URLs to other URLs in the url()
s in your CSS. You can change relative urls
to absolute urls, or absolute urls to relative urls, or you can change old urls to new urls that you want.
npm install --save-dev css-fix-url-loader
Or
yarn add --dev css-fix-url-loader
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: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'css-fix-url-loader',
query: {
from: '/assets/',
to: 'https://domain/assets/'
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'css-fix-url-loader',
query: {
from: '/assets/',
to: '/dir/assets/'
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'css-fix-url-loader',
query: {
from: '/assets/',
to: '/tmp/assets/',
env: 'development'
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'css-fix-url-loader',
query: {
from: '/images',
to: path.resolve(__dirname, './src/images'),
relative: true
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
Option | Description | Required |
---|---|---|
from | original url in url() | Y |
to | transformed url | Y |
env | value to control execution timing with process.env.NODE_ENV . Default is 'production'. |
N |
relative | if need to trasform urls from absolute to relative | N |