React.semantic UI 아이콘이 webpack middle ware로로드되지 않습니다.

Question

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 페이지에 대한 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 loader를 사용하는 대신, 내가 수행하는 것과 동등해야한다고 생각합니다.

.css 로더 규칙에 sass-loader이 포함되지 않아야하나요?

또한 로더 구성 옵션 use이 webpack v2에 추가 된 것 같습니다. 따라서 webpack v1을 사용하는 경우 다른 규칙과 마찬가지로 loaders이어야합니다.

희망을 찾으실 수 있습니다!