模块解析失败：错误：semantic/dist/semantic.min.css 意外字符 '@' (11:0)

Question

我使用当前版本的 react-boilerplate（使用 webpack）并安装了 Semantic-UI-React，如官方文档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

如果您在规则中使用包含指令，请确保还包含 node_modules：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'resolve-url-loader'],
  include: [
    path.join(__dirname, 'src'),
    /node_modules/
  ],
},

这应该可以解决问题，因为您指示 webpack 在加载 css 时确保包含节点模块，以便在导入语义 ui css 包时可以正确利用 css-loader。