Question

我想在Webpack中使用svgo-loader加载SVG文件，但是我收到以下错误：

错误在./~/css-loader?modules&localIdentName=[name][local][hash:base64：5]！。/ 〜/ autoprefixer装载机！./〜/更少的装载机！./演示/ src目录/组件/应用/组件/头/ Header.less 找不到模块：错误：无法解析模块＆＃39; logo.svg＆＃39; in / Users / mishamoroshko / react-autosuggest / demo / src / components / App / components / Header @ ./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]！。/〜/ autoprefixer-loader！。/〜/ less-loader！./ demo / src / components / App / components / Header / Header.less 6：199-218
./demo/src/components/App/components/Header/Header.less中的错误模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解析模块＆＃39; logo.svg＆＃39; in / Users / mishamoroshko / react-autosuggest / demo / src / components / App / components / Header

以下是相关的代码位：

Webpack配置

module: {
  loaders: [
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!autoprefixer!less'),
      exclude: /node_modules/
    },
    {
      test: /\.svg$/,
      loader: 'url?limit=8192!svgo'
    },
    ...
  ]
}

的package.json

"svgo": "^0.6.1",
"svgo-loader": "^1.1.0",
"url-loader": "^0.5.7",
...

Header.less

.logo {
  background-image: url(./logo.svg);
}

logo.svg和Header.less位于同一目录中。

我在这里缺少什么？

要重现：

1. git clone git@github.com:moroshko/react-autosuggest.git
2. cd react-autosuggest
3. git checkout a5f1a99
4. npm install
5. npm start

Answer 1

This css-loader issue似乎相关。

作为解决方法，改变：

background-image: url(./logo.svg);

为：

background-image: url(../parent-folder/logo.svg);

解决了错误。

如何在Webpack中加载SVG图像？

1 个答案: