模塊解析失敗：錯誤：semantic/dist/semantic.min.css意外字符'@'（11：0）

我使用當前版本的react-boilerplate（使用webpack）並安裝了Semantic-UI-React在官方的文檔http://react.semantic-ui.com/usage 模塊解析失敗：錯誤：semantic/dist/semantic.min.css意外字符'@'（11：0）

描述當我啓動服務器，我得到：

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);

如何解決這個問題？

來源

2017-02-16 StandardNerd

我可以通過安裝sass-loader來解決這個問題 - 因爲我要使用scss。

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

命名./semantic/dist/semantic.min.css到./semantic/dist/semantic.min.scss 和修改配置：如果您使用的是包含在規則指令

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

來源

2017-02-17 10:02:24 StandardNerd

確保還包括node_modules：

那應該解決問題，因爲它指示webpack確保在加載css時包含節點模塊，以便它可以正確地使用u在導入語義ui css包時傾斜css-loader。

來源

2017-05-02 14:12:46 n0f3

第一步：安裝以下軟件包

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

Step2：接着，在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' 
     } 
    ] 
}

第三步：在模塊，

如果您安裝了語義css通過npm包npm install --save-dev semantic-ui-css，那麼進口入口應該是import './node_modules/semantic-ui-css/semantic.min.css'

如果您尚未通過npm安裝semantic-ui-css，請使用relavent導入聲明。

來源

2018-01-18 09:14:33 BhaskarKG

模塊解析失敗：錯誤：semantic/dist/semantic.min.css意外字符'@'（11：0）

回答

相關問題