Иконки пользовательского интерфейса React.semantic не загружаются с промежуточным программным обеспечением webpack

Я пытаюсь создать приложение для реагирования, используя React Semantic. Я использую webpack-dev-server, webpack-hot-middleware и webpack-dev-middleware для автоматизации задач.

Я установил реактивный семантический интерфейс через npm.

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

однако веб-пакет, похоже, не загружает значки ./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']
    }
}

Есть ли какой-нибудь загрузчик или пакет для включения значков из пакета семантического пользовательского интерфейса?


webpack reactjs node.js webpack-dev-server semantic-ui
person m.akbari    schedule 14.05.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я также использую SUI-React с webpack. У меня была аналогичная проблема, однако для меня файлы значков были «упакованы» веб-пакетом, но загружались неправильно. Вы уверены, что веб-пакет их вообще не находит?

В конце концов я обнаружил, что источником моей проблемы была конфигурация веб-пакета: мой выходной путь был подкаталогом dist, из которого index.html загружал bundle.js. Это означало, что веб-пакет (и 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")

в индексном файле, а не с помощью загрузчиков веб-пакетов, однако я думаю, что это должно быть эквивалентно тому, что вы делаете.

Может быть, ваше правило загрузчика .css не должно включать sass-loader?

Кроме того, параметр конфигурации загрузчика use, кажется, был добавлен в webpack v2, поэтому, если вы используете webpack v1, он должен быть loaders, как и для других правил.

Надеюсь, ты разберешься!

person wolf1oo    schedule 25.05.2017