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

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

css-fix-url-loader

css-fix-url-loader

Description

Install

Usage

When you want to trasform `url(/assets/...)` to `url(https://domain/assets/...)`, the `webpack.config.js` is below

When you want to trasform `url(/assets/...)` to `url(/dir/assets/...)`, the `webpack.config.js` is below

When you want to trasform urls when only development, the `webpack.config.js` is below

When you want to trasform urls from absolute to relative, the `webpack.config.js` is below

Options

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

css-fix-url-loader

css-fix-url-loader

Description

Install

Usage

When you want to trasform url(/assets/...) to url(https://domain/assets/...), the webpack.config.js is below

When you want to trasform url(/assets/...) to url(/dir/assets/...), the webpack.config.js is below

When you want to trasform urls when only development, the webpack.config.js is below

When you want to trasform urls from absolute to relative, the webpack.config.js is below

Options

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

When you want to trasform `url(/assets/...)` to `url(https://domain/assets/...)`, the `webpack.config.js` is below

When you want to trasform `url(/assets/...)` to `url(/dir/assets/...)`, the `webpack.config.js` is below

When you want to trasform urls when only development, the `webpack.config.js` is below

When you want to trasform urls from absolute to relative, the `webpack.config.js` is below

Weekly Downloads