Question

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

找不到模块：错误：无法解析＆＃39; marker.svg＆＃39;

scss文件中的

＆＃13;

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

＆＃13;

webpack中的scss配置

＆＃13;

{
  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,
    }
  }]
},

＆＃13;

webpack中的图像配置

＆＃13;

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

＆＃13;

devserver config

＆＃13;

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

＆＃13;

是devserver吗？ CSS-模块？ sourceMap？我也无法在css中导入图像文件。请帮忙

Answer 1

在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,
    }
  }]
},

Answer 2

如果您使用的是 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,
      },
    }
  },
 ...

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

2 个答案: