モジュールの解析に失敗しました：エラー：semantic/dist/semantic.min.css予期しない文字 '@'（11：0）

Question

私は現在のバージョンのreact-boilerplate（webpackを使用しています）を使用し、Semantic-UI-私は私が手にサーバを起動すると公式ドキュメントhttp://react.semantic-ui.com/usage

で説明：

Server started ! ✓ 

Access URLs: 
----------------------------------- 
Localhost: http://localhost:3000 
     LAN: http://192.168.100.103:3000 
----------------------------------- 
Press CTRL-C to stop 

webpack built dba595efb772df0727e8 in 11657ms 

ERROR in ./semantic/dist/semantic.min.css 
Module parse failed: /Users/standardnerd/development/template/semantic/dist/semantic.min.css Unexpected character '@' (11:0) 
You may need an appropriate loader to handle this file type. 
| * 
| */ 
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*! 
| * # Semantic UI 2.2.7 - Reset 
| * http://github.com/semantic-org/semantic-ui/ 
@ ./app/app.js 20:0-43 
@ multi main 

私は「適切なローダー」どのような種類のが必要なのですか？

パーサは/semantic/dist/semantic.min.cssで@import文を好きではない：

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin); 

この問題を解決する方法は？

Answer 1

私はscssをとにかく使っているので、sass-loaderのインストールで問題を解決できました。

npm install sass-loader node-sass webpack --save-dev 

./semantic/dist/semantic.min.scssにし、設定を変更する./semantic/dist/semantic.min.cssの名前を変更します。あなたも含まれていることを確認したルールでディレクティブを含め使用している場合

test: /\.scss$/, 
     use: [{ 
     loader: 'style-loader', 
     }, { 
     loader: 'css-loader', 
     }, { 
     loader: 'sass-loader', 
     }], 

Answer 2

node_modules：

​​

ことwebpackに指示して問題を解決する必要があります.CSPをロードする際に、ノードモジュールが含まれていることを確認してください。セマンティックUIパッケージをインポートするときにCSSローダを傾ける。

Answer 3

ステップ1：以下のパッケージをインストールします

npm install --save-dev css-loader sass-loader node-sass url-loader file-loader

ステップ2：次に、webpack.config.jsファイルに：

module: { 
    rules: [ 
     { 
      test: /\.css$/, 
      loader: 'style-loader!css-loader' 
     }, 
     { 
      test: /\.s[a|c]ss$/, 
      loader: 'sass-loader!style-loader!css-loader' 
     }, 
     { 
      test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/, 
      loader: 'url-loader?limit=100000' 
     } 
    ] 
} 

ステップ3：モジュールで、

あなたはセマンティックインストールした場合NMSパッケージnpm install --save-dev semantic-ui-css経由でCSSをインポートすると、インポートエントリはimport './node_modules/semantic-ui-css/semantic.min.css'

になるはずです

semantic-ui-cssをnpmでインストールしていない場合は、relavent import statmentを使用してください。