Hey there! Let's get your resolve-url-loader configured properly in your Webpack 2 setup from Vue CLI. I'll break this down into simple, actionable steps:

Step 1: Install the Dependency #

First, make sure you have resolve-url-loader installed in your project. Run this command in your terminal:

npm install resolve-url-loader --save-dev
# Or use yarn if you prefer
yarn add resolve-url-loader --dev

Step 2: Modify utils.js (Key Configuration File) #

Vue CLI centralizes loader logic in utils.js, so this is where we'll adjust the loader chains to include resolve-url-loader.

Locate the generateLoaders function in utils.js and update it to insert resolve-url-loader in the correct order, plus ensure sass-loader has source maps enabled (required for resolve-url-loader to work):

function generateLoaders(loader, loaderOptions) {
  // Start with base loaders (css-loader + postcss-loader if enabled)
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

  // Add resolve-url-loader RIGHT AFTER css-loader
  loaders.push('resolve-url-loader');

  // Add the preprocessor loader (if specified)
  if (loader) {
    const loaderConfig = {
      loader: `${loader}-loader`,
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
    };

    // Force sourceMap for sass/scss (critical for resolve-url-loader)
    if (loader === 'sass') {
      loaderConfig.options.sourceMap = true;
    }

    loaders.push(loaderConfig);
  }

  // Handle CSS extraction for production builds
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    });
  } else {
    return ['vue-style-loader'].concat(loaders);
  }
}

Why This Works: #

• Loader order matters in Webpack (executed right-to-left):
  • resolve-url-loader runs after css-loader (and PostCSS if enabled) to resolve relative asset paths
  • Preprocessor loaders (like sass-loader) run after resolve-url-loader, with source maps forced on to ensure path resolution works correctly
• The setup handles both development (inline styles via vue-style-loader) and production (extracted CSS via ExtractTextPlugin) builds automatically

Step 3: Double-Check vue-loader.conf.js #

You shouldn't need to modify this file directly, but confirm it's importing the updated cssLoaders from utils.js:

const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  // ... rest of the config
}

Step 4: Test Your Configuration #

Run your development server or production build to verify everything works:

npm run dev
# Or production build
npm run build

If you run into issues, double-check:

• Loader order (resolve-url-loader must come after css-loader, before sass-loader)
• sass-loader has sourceMap: true enabled (the code above handles this)
• You've installed all required dependencies

内容的提问来源于stack exchange，提问作者user762579