在 webpack 之后找不到 scss 模块文件中的 svg 导入答案

【问题标题】：svg import in scss module file not found after webpack在 webpack 之后找不到 scss 模块文件中的 svg 导入
【发布时间】：2018-01-12 23:56:39
【问题描述】：

我无法在使用 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 中导入图像文件。请帮忙

【问题讨论】：

在 sass-loader 之前安装和使用 resolve-url-loader
旧帖，但您还记得解决方法吗？

标签： image webpack css-modules

【解决方案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,
      },
    }
  },
 ...

【讨论】：

【解决方案2】：

像这样在 sass-loader 之前使用 resolve-url-loader

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
  }, {
    loader: 'postcss-loader',
  },
  { loader: 'resolve-url-loader', }
  {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

【讨论】：