模块解析失败：错误：语义/dist/semantic.min.css 意外字符“@”（11:0）答案

【问题标题】：Module parse failed: error: semantic/dist/semantic.min.css Unexpected character '@' (11:0)模块解析失败：错误：语义/dist/semantic.min.css 意外字符“@”（11:0）
【发布时间】：2017-07-05 10:07:42
【问题描述】：

我使用当前版本的 react-boilerplate（使用 webpack）并按照官方文档http://react.semantic-ui.com/usage 中的描述安装了 Semantic-UI-React

当我启动服务器时，我得到：

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

如何解决这个问题？

【问题讨论】：

标签： webpack semantic-ui react-boilerplate semantic-ui-react

【解决方案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。

【讨论】：

【解决方案2】：

第一步：安装以下包

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'
        }
    ]
}

Step3：在模块中，

如果你通过npm包npm install --save-dev semantic-ui-css安装语义css，那么import entry应该是import './node_modules/semantic-ui-css/semantic.min.css'

如果您还没有通过 npm 安装 semantic-ui-css，请使用相关导入语句。

【讨论】：

【解决方案3】：

我可以通过安装 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',
      }],

【讨论】：