node.js - React.semantic ui 图标未使用 webpack 中间件加载

Question

我正在尝试使用 React Semantic 构建一个 React 应用程序。 我正在使用 webpack-dev-server、webpack-hot-middleware 和 webpack-dev-middleware 来自动化任务。

我通过npm安装了react语义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)使 url 相对于该目录。一旦我将输出路径更改为父目录，并将输出文件更改为 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 ，就像您所使用的那样其他规则。

希望你能明白!