Alter-css-url-loader NPM

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',
        ],
      },
    ],
  },
}