首页 文章

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

提问于
浏览 次
1

我正在尝试使用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包的图标？

node.js reactjs webpack semantic-ui webpack-dev-server

1 回答

  • 2

    我也在使用带有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 .

    希望你能搞清楚！

    回复于

相关问题