css-fix-url-loader
v1.0.2
Published
Webpack loader to transform URLs to other URLs on CSS.
Downloads
1,489
Maintainers
Readme
css-fix-url-loader
Webpack loader to transform URLs to other URLs in CSS. Fork from css-url-loader
Description
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.
Install
npm install --save-dev css-fix-url-loader
Or
yarn add --dev css-fix-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: 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'),
...
],
When you want to trasform url(/assets/...)
to url(/dir/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: '/dir/assets/'
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
When you want to trasform urls when only development, 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: '/tmp/assets/',
env: 'development'
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
When you want to trasform urls from absolute to relative, 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: '/images',
to: path.resolve(__dirname, './src/images'),
relative: true
}
}
],
}),
},
...
],
},
plugins: [
...
new ExtractTextPlugin('bundle.css'),
...
],
Options
| 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 |