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:

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

Loader must be chained directly after sass-loader or similar.

Example

webpack.config.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