webpack 2 How to apply modification to webpack config

Question

My webpack config files are generated by vue-cli..

I need to apply the following modification which was written for webpack 1 I guess , to add the resolve-url-loader. (see resolve-url-loader

Apply via webpack config

It is preferable to adjust your webpack.config so to avoid having to prefix every require() statement:

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      }, {
        test   : /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
      }
    ]
  }
};

How can I edit my webpack 2 config ? which is composed of ( files !

utils.js
vue-loader.conf.js
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js

thanks for feedback and useful links to read ...

Answer 1

I am using vue-cli-3 and it took quite some time to find out how to solve this issue. I had to put this into my vue.config.js:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    /**
     * Transform relative url() references in css files.
     */
    const resolveAfterSass = {
      use: {
        'resolve-url-loader': {
          loader: 'resolve-url-loader',
          options: {},
          before: 'sass-loader'
        },
        'sass-loader': {
          options: {
            sourceMap: true
          }
        }
      }
    };
    config.merge({
      module: {
        rule: {
          'sass': {
            oneOf: {
              'normal': resolveAfterSass,
              'normal-modules': resolveAfterSass,
              'vue': resolveAfterSass,
              'vue-modules': resolveAfterSass,
            }
          },
          'scss': {
            oneOf: {
              'normal': resolveAfterSass,
              'normal-modules': resolveAfterSass,
              'vue': resolveAfterSass,
              'vue-modules': resolveAfterSass,
            }
          }
        }
      }
    });
  }
};

This adds the url-resolve-loader for all the sass/scss code.

Answer 2

Solved ... added it in the build/utils.js after the postcssLoader

build/utils.js

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  // added  reslve-url-loaderr with sourceMap true
  const resolveUrlLoader = {
    loader: 'resolve-url-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }