# alter-css-url-loader

> Webpack loader for a more custom CSS url() altering

Latest version **1.1.3** (published 2021-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install alter-css-url-loader
pnpm add alter-css-url-loader
yarn add alter-css-url-loader
bun add alter-css-url-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-06-23 |
| First published | 2019-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.12.0 |
| Dependencies | 5 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | flowzy |
| Maintainers | flowzy |
| Keywords | webpack, loader, css, url, replace, webpack-loader, sass, css-url-loader, reddit |

## Links

- npm: https://www.npmjs.com/package/alter-css-url-loader
- Repository: https://github.com/flowzy/alter-css-url-loader
- Homepage: https://github.com/flowzy/alter-css-url-loader#readme
- Issues: https://github.com/flowzy/alter-css-url-loader/issues
- npm.io page: https://npm.io/package/alter-css-url-loader

## Dependencies (5)

- [memfs](https://npm.io/package/memfs.md) ^3.2.2
- [webpack](https://npm.io/package/webpack.md) ^5.0.0
- [sprintf-js](https://npm.io/package/sprintf-js.md) ^1.1.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [schema-utils](https://npm.io/package/schema-utils.md) ^3.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2021-06-23
- 1.0.5-beta.0 (beta) — 2020-01-04
- 1.1.2 — 2021-06-23
- 1.1.1 — 2021-06-23
- 1.1.0 — 2021-06-22
- 1.0.4 — 2020-01-04
- 1.0.4-beta.1 — 2020-01-04
- 1.0.4-beta.0 — 2020-01-04
- 1.0.3 — 2019-12-28
- 1.0.1 — 2019-12-26
- 1.0.0 — 2019-12-26

## README

<div style="text-align: center">
  <a href="https://github.com/webpack/webpack">
    <img
      width="200"
      height="200"
      src="https://webpack.js.org/assets/icon-square-big.svg"
      alt="Webpack"
    />
  </a>

<!-- prettier-ignore -->
  [![npm][npm]][npm-url]
  [![node][node]][node-url]
  [![travis][travis]][travis-url]
  [![coverage][coverage]][coverage-url]
  [![downloads][downloads]][npm-url]
  [![license][license]][license-url]

</div>

# alter-css-url-loader

Allows for a more custom altering of CSS's `url()` paths.

## Getting started

To begin, you'll need to install `alter-css-url-loader`:

```bash
$ npm install alter-css-url-loader webpack@^5 --save-dev
```

Loader must be chained directly after [sass-loader](https://github.com/webpack-contrib/sass-loader) or similar.

## Example

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Extracts CSS into a separate file
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          {
            loader: 'css-loader',
            options: {
              url: false, // disable url resolving
            },
          },
          // alters CSS url contents
          {
            loader: 'alter-css-url-loader',
            options: {
              alter(url) {
                // would return "../img/foo.png"
                // instead of "./img/foo.png"
                return url.replace('./', '../')
              },
            },
          },
          // compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
}
```

## Options

### `enabled`

Type: `Boolean`

Default: `true` if `NODE_ENV` is either `production` or `test`

Enables or disables the loader.

### `alter`

Type: `Function`

Alters each and every url given to it. This function should return a `String`.

### `reddit`

Type: `Boolean`

Determines whether to use the built-in function for transforming CSS `url()` to comply with Reddit's syntax.

Example: `./img/headers/header-1.jpg` => `%%header-1%%`

> Note: this option, if set to "true", cannot be used together with `alter`.

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/alter-css-url-loader
[npm-url]: https://npmjs.com/package/alter-css-url-loader
[node]: https://img.shields.io/node/v/alter-css-url-loader
[node-url]: https://nodejs.org
[travis]: https://img.shields.io/travis/flowzy/alter-css-url-loader
[travis-url]: https://travis-ci.org/flowzy/alter-css-url-loader
[coverage]: https://coveralls.io/repos/github/flowzy/alter-css-url-loader/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/flowzy/alter-css-url-loader?branch=master
[downloads]: https://img.shields.io/npm/dt/alter-css-url-loader
[license]: https://img.shields.io/npm/l/alter-css-url-loader
[license-url]: ./LICENSE

---
_Source: https://npm.io/package/alter-css-url-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._