如何配置Webpack忽略SCSS中不存在的资源文件？

针对你遇到的问题，核心是让Webpack不要尝试解析这个由服务器生成、本地不存在的图片路径。可以通过修改css-loader的配置，过滤掉不需要解析的URL，具体操作如下：

配置步骤 #

在项目根目录的vue.config.js中添加以下配置（如果没有该文件则新建）：

module.exports = {
  chainWebpack: config => {
    // 处理Vue组件内的SCSS样式
    config.module.rule('scss')
      .oneOf('vue')
      .use('css-loader')
      .tap(options => {
        options.url = {
          // 过滤规则：以/static/开头的URL不进行解析
          filter: (url) => !url.startsWith('/static/')
        }
        return options
      })

    // 处理单独的SCSS文件（如你的src/scss/general.scss）
    config.module.rule('scss')
      .oneOf('normal')
      .use('css-loader')
      .tap(options => {
        options.url = {
          filter: (url) => !url.startsWith('/static/')
        }
        return options
      })
  }
}

原理说明 #

css-loader默认会解析CSS中的url()路径，尝试将其作为模块加载。通过设置url.filter返回false，可以让css-loader跳过对指定URL的解析，直接保留原路径字符串。这样Webpack就不会去本地查找该文件，自然不会抛出找不到模块的错误。

配置完成后，重启项目编译服务即可生效。

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