https://github.com/keidrun/css-url-loader
Webpack loader to transform URLs to other URLs in CSS.
https://github.com/keidrun/css-url-loader
absolute-paths absolute-url css loader relative-paths relative-url url webpack webpack-loader
Last synced: 11 months ago
JSON representation
Webpack loader to transform URLs to other URLs in CSS.
- Host: GitHub
- URL: https://github.com/keidrun/css-url-loader
- Owner: keidrun
- License: mit
- Created: 2017-12-02T03:35:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T21:23:39.000Z (over 2 years ago)
- Last Synced: 2025-06-11T21:05:59.031Z (12 months ago)
- Topics: absolute-paths, absolute-url, css, loader, relative-paths, relative-url, url, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# css-url-loader
[![NPM version][npm-image]][npm-url] [![npm module downloads][npm-downloads-image]][npm-downloads-url] [![Build Status][travis-image]][travis-url] [![Coverage][codecov-image]][codecov-url] [![Dependency Status][depstat-image]][depstat-url] [![License: MIT][license-image]][license-url]
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
```bash
npm install --save-dev css-url-loader
```
Or
```bash
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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 |
[npm-url]: https://npmjs.org/package/css-url-loader
[npm-image]: https://badge.fury.io/js/css-url-loader.svg
[npm-downloads-url]: https://npmjs.org/package/css-url-loader
[npm-downloads-image]: https://img.shields.io/npm/dt/css-url-loader.svg
[travis-url]: https://travis-ci.org/keidrun/css-url-loader
[travis-image]: https://secure.travis-ci.org/keidrun/css-url-loader.svg?branch=master
[codecov-url]: https://codecov.io/gh/keidrun/css-url-loader
[codecov-image]: https://codecov.io/gh/keidrun/css-url-loader/branch/master/graph/badge.svg
[depstat-url]: https://david-dm.org/keidrun/css-url-loader
[depstat-image]: https://david-dm.org/keidrun/css-url-loader.svg
[license-url]: https://opensource.org/licenses/MIT
[license-image]: https://img.shields.io/badge/License-MIT-yellow.svg