css-url-prefix-loader

Webpack loader to transform URLs to other URLs in CSS.

Description

Transform URLs to other URLs in the url()s in your CSS.

Install

1npm install --save-dev cross-env

1npm install --save-dev css-url-prefix-loader

Or

1yarn add --dev css-url-prefix-loader

Usage

When you want to trasform url(/images/...) to url(https://dev.com/images/...) or url(https://live.com/images/...), the webpack.config.js is below

1module.exports = {
2  ...
3  module: {
4    rules: [
5      ...
6      {
7        test: /\.css$/,
8        use: ExtractTextPlugin.extract({
9          fallback: 'style-loader',
10          use: [
11            'css-loader',
12            {
13              loader: 'css-url-prefix-loader',
14              query: {
15                from: '/images',
16                dev: 'https://dev.com',
17                live: 'https://live.com'
18              }
19            }
20          ],
21        }),
22      },
23      ...
24    ],
25  },
26  plugins: [
27    ...
28    new ExtractTextPlugin('bundle.css'),
29    ...
30  ],

1cross-env NODE_ENV=dev webpack --config webpack.config.js

Or

1cross-env NODE_ENV=live webpack --config webpack.config.js