Jak załadować obrazy SVG w pakiecie Web Pack?

Chciałbym załadować pliki SVG używając svgo-loader w Webpack, ale pojawia się następujący błąd:Jak załadować obrazy SVG w pakiecie Web Pack?

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

Oto odpowiednie bity kod:

WebPACK config

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 i Header.less znajdują się w tym samym katalogu.

Czego mi tu brakuje?

Aby odtworzyć:

1. git clone [email protected]:moroshko/react-autosuggest.git 
2. cd react-autosuggest 
3. git checkout a5f1a99 
4. npm install 
5. npm start

Źródło

2015-12-27 Misha Moroshko

Po usunięciu 'modules & localIdentName = [nazwa] __ [local] ___ [hash: base64: 5]', błąd zniknie. Być może jest to błąd w [css-loader] (https://github.com/webpack/css-loader). Może warto poświęcić chwilę, aby otworzyć problem, aby zobaczyć, co autor ma do powiedzenia. –

@bebraw Zobacz moją odpowiedź poniżej –

This css-loader issue wydaje powiązane.

Jako obejście, zmieniając:

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

do:

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

rozwiązuje ten błąd.

Źródło

2015-12-28 00:57:21

Jak załadować obrazy SVG w pakiecie Web Pack?

Odpowiedz

Powiązane problemy