❤
npm
Sign UpSign In

css-url-loader

2.1.0 • Public • Published

css-url-loader

NPM version npm module downloads Build Status Coverage Dependency Status License: MIT

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

Readme

Keywords

Package Sidebar

Install

npm i css-url-loader

Repository

github.com/keidrun/css-url-loader

Homepage

github.com/keidrun/css-url-loader#readme

Weekly Downloads

96

Version

2.1.0

License

MIT

Unpacked Size

297 kB

Total Files

11

Last publish

Collaborators

  • keidrun
Try on RunKit
Report malware