我在从 SLDS 节点模块（Salesforce Lightning 设计系统）获取 SVG 图标以进行渲染时遇到问题。我下面的示例在 webpack 1.x 项目中运行良好。
在开发控制台中，当use标签使用的 svg 被渲染时，我可以看到 404。我尝试了不同的加载器类型并模仿了字体所做的事情（因为这些工作正常），但我似乎无法让 Webpack 识别 SLDS 节点模块中的 SVG 文件并捆绑/发送它们。我尝试将以下组件的源代码复制到 Webpack 1.x 项目中，并且效果很好。任何建议将不胜感激。
下面的组件、Webpack 和输出。让我知道我是否需要提供更多。
应用组件：
import React, { PropTypes } from 'react';
import './styles.scss'
export default React.createClass({
displayName: 'App',
render() {
return (
<div className="slds-page-header">
<div className="slds-grid">
<div className="slds-col slds-has-flexi-truncate">
<div className="slds-media slds-no-space slds-grow">
<div className="slds-media__figure">
<svg className="slds-icon slds-icon-standard-user" aria-hidden="true">
<use xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
</svg>
</div>
<div className="slds-media__body">
<p className="slds-text-title--caps slds-line-height--reset">Icons</p>
<h1 className="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Won't Load</h1>
</div>
</div>
</div>
</div>
</div>
);
}
});
网络包配置：
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var RESOURCES = path.resolve(__dirname, 'src/main/resources');
var ASSETS = path.resolve(RESOURCES, 'assets');
var APP = path.resolve(RESOURCES, 'app');
var DIST = path.resolve(ASSETS, 'dist');
var extractCSS = new ExtractTextPlugin('[name].css');
var extractSCSS = new ExtractTextPlugin('[name].scss');
module.exports = {
devtool: 'source-map',
devServer: {
contentBase: ASSETS,
compress: true,
port: 8080
},
entry: {
app: APP + '/index.js'
},
resolve: {
extensions: [ '.js', '.jsx', '.json']
},
output: {
path: DIST,
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.jsx?/,
use: 'babel-loader',
include: [
APP
]
},
{ test: /\.json/, loader: ['json-loader'] },
{
test: /\.(gif|jpe?g|png)/,
use: [
{ loader: 'url-loader' }
]
},
{
test: /\.svg/,
use: { loader: 'url-loader' }
},
{
test: /\.(eot|woff|woff2|ttf)$/,
use: {
loader: 'url-loader',
options: {
limit: 30,
name: 'assets/fonts/webfonts/[name].[ext]'
}
}
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: { sourceMap: true }
}
})
},
{
test: /\.scss$/,
use: extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
outputStyle:'expanded',
sourceMap: true,
sourceMapContents: true
}
}
]
})
}
]
},
plugins: [ extractCSS ]
};
构建输出
> webpack
Hash: 413338d67a2515c58948
Version: webpack 2.2.1
Time: 10382ms
Asset Size Chunks Chunk Names
assets/fonts/webfonts/SalesforceSans-Light.woff2 27.7 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff2 28.3 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Light.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff2 27.6 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff 36.2 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff 34.9 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff2 27.7 kB [emitted]
bundle.js 1.74 MB 0 [emitted] [big] app
bundle.js.map 2.1 MB 0 [emitted] app
渲染输出
预期产出
