React.semantic ui的Icones未加載webpack中間件

我正在嘗試使用React Semantic構建反應應用程序。我正在使用webpack-dev-server，webpack-hot-middleware和webpack-dev-middleware來自動執行任務。React.semantic ui的Icones未加載webpack中間件

我通過npm安裝了反應語義ui。

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

然而，的WebPack似乎沒有加載./node_modules/semantic-ui-css/themes/assets/fonts/圖標並且它不accessabile的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包的圖標？

來源

2017-05-14 m.akbari

我也在使用帶有webpack的SUI-React。我遇到了類似的問題，但是對於我來說，圖標文件是由webpack「打包」的，但沒有正確加載。你確定webpack根本找不到它們嗎？

我最終發現我的問題的來源是webpack配置：我的輸出路徑是dist子目錄，從中加載index.htmlbundle.js。這意味着webpack（和file-loader）相對於該目錄製作了這些網址。一旦我通過輸出路徑更改到父目錄，並將輸出文件更改爲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' 
    } 
]

我加載使用

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

的CSS

在索引文件中，而不是使用webpack加載器，但我認爲這應該相當於你在做什麼。

也許你的.css裝載機規則不應該包括sass-loader？

此外，裝載程序配置選項use似乎已添加到webpack v2中，因此如果您使用的是webpack v1，那麼應該是loaders，就像其他規則一樣。

希望你能弄明白！

來源

2017-05-25 21:02:37 wolf1oo

React.semantic ui的Icones未加載webpack中間件

回答

相關問題