vue.js - webpack 2 如何将修改应用于 webpack 配置

Question

我的 webpack 配置文件是由 vue-cli 生成的。

我猜我需要应用为 webpack 1 编写的以下修改，以添加 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']
      }
    ]
  }
};

如何编辑我的 webpack 2 配置？它由（文件！

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

感谢您的反馈和有用的阅读链接...

Answer 1

我正在使用 vue-cli-3 并且花了相当长的时间来找出如何解决这个问题。我不得不把它放进我的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,
            }
          }
        }
      }
    });
  }
};

这url-resolve-loader为所有sass/scss代码添加了。

Answer 2

已解决...在 postcssLoader 之后的 build/utils.js 中添加了它

构建/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
    }
  }