React.semantic uiのアイコンがwebpackミドルウェアでロードされていません

Question

React Semanticを使用して反応アプリケーションを構築しようとしています。 私はwebpack-dev-server、webpack-hot-middleware、webpack-dev-middlewareを使ってタスクを自動化しています。

リアクションセマンティクスui〜npmをインストールしました。

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

しかし、WebPACKのは./node_modules/semantic-ui-css/themes/assets/fonts/アイコンをロードしないために、それはHTMLページのaccessabileされていないようです。 コンソールにエラーはありません。アイコンは表示されません。

反応アプリで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

私もSUI-React with webpackを使用しています。私も同様の問題を抱えていましたが、私のアイコンファイルはwebpackによって「圧縮」されていましたが、正しく読み込まれていませんでした。あなたはwebpackがそれらを全く見つけていないと確信していますか？

最終的に私の問題の原因はウェブパックの設定であることが判明しました。出力パスはdistサブディレクトリで、index.htmlがロードされましたbundle.jsです。これはwebpack（とfile-loader）がそのディレクトリからの相対URLを作ったことを意味していました。出力パスを親ディレクトリに変更して出力ファイルをdist/bundle.jsに変更すると、すべてが期待通りに機能しました。あなたは（唯一のエントリポイントが、私はwebpack-hot-middlewareを使用していない）場合と同様にマイwebpack.config.js

は、エントリポイントを指定し、私のローダーは、次のとおりです。

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をロードしています

は、webpackローダーを使用するのではなく、インデックスファイルに含まれていますが、これはあなたがやっていることと同等でなければならないと思います。

たぶんあなた.cssローダールールがsass-loaderを含めるべきではないのですか？

また、ローダー設定オプションuseがwebpack v2に追加されているようですので、webpack v1を使用している場合は、他のルールの場合と同じようにloadersである必要があります。

あなたはそれを理解できますように！