webpack 后未找到 scss 模块文件中的 svg 导入

Question

我无法使用 webpack 在我的 React 项目中通过 scss 文件导入背景图像。我遵循了最近关于 stackexchange 的所有建议，但没有效果。当我尝试通过 scss 或 css 文件导入图像时，收到此错误消息：

找不到模块：错误：无法解析“marker.svg”

在.scss文件中

.marker {
  background-image: url('./marker.svg');

webpack 中的 scss 配置

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[hash:base64:5]',
      modules: true,
      sourceMap: IS_DEV
    }
  }, {
    loader: 'postcss-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

webpack 中的图像配置

{
  test: /\.(svg|png|jpg)$/,
  use: {
    loader: 'url-loader',
    loader: 'svg-url-loader',
    loader: 'file-loader',
    loader: 'resolve-url-loader',
  },
},

开发服务器配置

devServer: {
  historyApiFallback: true,
  hot: true,
  contentBase: dest,
  compress: true,
  port: 9000,
  publicPath: 'http://localhost:9000/dest',
},

是开发服务器吗？CSS 模块？源图？我在 css 中导入图像文件时也遇到问题。请帮忙

Answer 1

如果您使用css-loader ^3.0.0您应该设置url: false（用“---->”标记）：

    ...
    test: /\.(scss|sass)$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader', options: {
----->      url: false,
            importLoaders: 2,
            modules: {
              mode: 'local',
              localIdentName: isProduction ? '[hash:base64:5]' : '[local]_[hash:base64:5]'
            },
          },
        },
        { loader: 'postcss-loader' },
        { loader: 'sass-loader', options: {
            includePaths: ['./src']
          }
        },
      ],
    })
  },
  {
    test: /\.(svg|png)$/,
    use: {
      loader: 'url-loader', options: {
        name: 'assets/[hash].[ext]',
        limit: 5000,
      },
    }
  },
 ...