Question

我正在尝试使用React Semantic构建一个react应用程序。我使用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页面。控制台没有错误，它只是没有显示图标。

如果我不在反应应用程序中导入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 file-loader。这意味着webpack（和dist/bundle.js）相对于该目录创建了URL。一旦我将输出路径更改为父目录，并将输出文件更改为webpack.config.js，一切都按预期工作。

我的webpack-hot-middleware指定了你的入口点（尽管只有一个入口点，我没有使用loaders: [ { test: /\.jsx?/, include: SRC_DIR, loader: 'babel' }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader' } ]），而我的加载器是：

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

我正在使用

加载css

.css

在索引文件中，而不是使用webpack加载器，但我认为这应该等同于你正在做的事情。

也许您的sass-loader加载程序规则不应包含use？

此外，加载程序配置选项loaders似乎已添加到webpack v2中，因此如果您使用的是webpack v1，则应该像其他规则一样{{'TITLE' | xlat}}。

希望你能搞清楚！

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

1 个答案: