React.semantic ui的Icones没有加载webpack中间件

我正在尝试使用React Semantic构build一个反应应用程序。 我正在使用webpack-dev-server，webpack-hot-middleware和webpack-dev-middleware来自动执行任务。

我通过npm安装了反应语义ui。

npm install --save semantic-ui-css semantic-ui-react 

然而，webpack似乎不加载./node_modules/semantic-ui-css/themes/assets/fonts/图标，它不是html页面./node_modules/semantic-ui-css/themes/assets/fonts/ 。 在控制台中没有错误，它只是不显示图标。

如果我没有在反应应用程序中导入semantic-ui-css，并且包含在CDN中，它就可以正常工作。

App.js

 import React from 'react'; import 'semantic-ui-css/semantic.min.css'; import { Container, Icon } from 'semantic-ui-react'; class App extends React.Component{ render(){ return ( <Container fluid> <h1 id='test'>ReactJs</h1> <hr/> <Icon name='search' /> </Container> ) } } export default App; 

webpack.config.dev.js

 import path from 'path'; import webpack from 'webpack'; export default { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client', path.join(__dirname, '/client/index.js') ], output:{ path: '/', publicPath: '/', filename: 'bundle.js' }, plugins: [ new webpack.NoEmitOnErrorsPlugin, new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], module:{ loaders: [ { test: /\.js$/, include: path.join(__dirname, 'client'), loaders: ['react-hot-loader', 'babel-loader'] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader','sass-loader'], }, { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader }, { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"] }, { test: /\.svg$/, loader: 'svg-loader' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] }, resolve:{ extensions: ['.js'] } } 

有没有任何装载程序或包来包含来自语义ui包的图标？

Answer 1

我也用webpack来使用SUI-React。 我有一个类似的问题，但是对于我的图标文件是由webpack“打包”，但没有正确加载。 你确定webpack根本找不到它们吗？

我最终发现我的问题的来源是webpackconfiguration：我的输出path是一个dist子目录， index.html bundle.js加载bundle.js 。 这意味着webpack（和file-loader ）相对于该目录创build了url。 一旦我通过输出path更改到父目录，并将输出文件更改为dist/bundle.js ，一切都按预期工作。

我的webpack.config.js指定了入口点（尽pipe只有一个入口点，我没有使用webpack-hot-middleware ），我的webpack-hot-middleware程序是：

 loaders: [ { test: /\.jsx?/, include: SRC_DIR, loader: 'babel' }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader' } ] 

我正在使用加载的CSS

 require("!style-loader!css-loader!semantic-ui-css/semantic.min.css") 

在索引文件而不是使用webpack加载器，但我认为这应该相当于你在做什么。

也许你的.css加载器规则不应该包含sass-loader ？

另外，加载程序configuration选项的use似乎已经添加到webpack v2中，所以如果您使用的是webpack v1，那么应该是像其他规则一样的loaders 。

希望你能弄明白！