Tôi muốn tải file SVG sử dụng svgo-loader trong Webpack, nhưng tôi nhận được lỗi sau:Làm thế nào để tải hình ảnh SVG trong Webpack?
ERROR in ./~/css-loader?modules&localIdentName=[name][local][hash:base64:5]!./~/autoprefixer-loader!./~/less-loader!./demo/src/components/App/components/Header/Header.less Module not found: Error: Cannot resolve module 'logo.svg' 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
ERROR in ./demo/src/components/App/components/Header/Header.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module 'logo.svg' in /Users/mishamoroshko/react-autosuggest/demo/src/components/App/components/Header
Dưới đây là các bit mã có liên quan:
Webpack cấu hình
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
và Header.less
đều nằm trong cùng thư mục.
Tôi thiếu gì ở đây?
Để tái sản xuất:
1. git clone [email protected]:moroshko/react-autosuggest.git
2. cd react-autosuggest
3. git checkout a5f1a99
4. npm install
5. npm start
Ngay sau khi tôi xóa 'modules & localIdentName = [name] __ [local] ___ [hash: base64: 5]', lỗi sẽ biến mất. Có lẽ đây là lỗi tại [css-loader] (https://github.com/webpack/css-loader). Nó có thể là giá trị trong khi của bạn để mở một vấn đề ở đó để xem những gì tác giả đã nói. –
@bebraw Xem câu trả lời của tôi bên dưới –