alert_detail.css
#alert-icon {
width: 6.4rem;
height: 6.4rem;
background: url('./images/alert_32px.svg') no-repeat center center;
margin: 0 auto;
margin-top: 2rem;
}
alert_32px.svg
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<defs>
<style>.cls-1{fill-rule:evenodd;fill:red;}</style>
</defs>
<title>external_screen_32px_icon</title>
<path class="cls-1" d="M27.87,24.54L17,5.51a1.23,1.23,0,0,0-2,0l-10.88,19A1,1,0,0,0,5,26H27A1,1,0,0,0,27.87,24.54ZM17,23H15V21h2v2Zm0-4H15V12h2v7Z"/>
</svg>
webpack.config,js
{
test: /\.scss|\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader",
publicPath: __dirname + '/dist'
})
},
```
最后打包出错:
```
ERROR in ./res/styles/images/alert_32px.svg
Module parse failed: /local/Workspace/Project/KaiOS/KaiOS_Dint_v3.0/apps/network-alerts2/res/styles/images/alert_32px.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
| <defs>
| <style>.cls-1{fill-rule:evenodd;fill:red;}</style>
@ ./~/css-loader!./~/sass-loader/lib/loader.js!./res/styles/attention.css 6:684-718
```