React.semantic ui的图标未加载到webpack中间件

Question

我正在尝试使用react语义构建一个React应用程序。我使用了webpack-dev-server，webpack-hot-中间件和webpack-dev-中间件来实现任务的自动化。

我通过npm安装了react semantic ui。

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

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

如果我没有在react应用程序中导入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根本找不到他们吗？

我最终发现问题的根源是webpack的配置:我的输出路径是一个dist子目录，index.html从这个子目录加载bundle.js。这意味着，webpack (和file-loader)创建了与该目录相关的urls。一旦我将输出路径更改为父目录，并将输出文件更改为dist/bundle.js，一切工作都如期进行。

我的webpack.config.js和您的一样指定入口点(虽然只有一个入口点，但我没有使用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

另外，加载器配置选项use似乎已经添加到了webpack v2中，所以如果您使用的是webpack v1，则应该是loaders，就像您对其他规则所做的那样。

希望你能解决这个问题！