Module parse failed: error: semantic/dist/semantic.min.css Unexpected character '@' (11:0)

Question

I use the current version of react-boilerplate (which uses webpack) and installed Semantic-UI-React like described in the official docs http://react.semantic-ui.com/usage

When I start the server I get:

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

What kind of 'appropriate loader' do I need?

The parser doesn't like the @import statement in /semantic/dist/semantic.min.css:

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

How to resolve this issue?

Answer 1

I could resolve the issue with installing sass-loader - since I'm gonna using scss anyway.

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

rename ./semantic/dist/semantic.min.css to ./semantic/dist/semantic.min.scss and modifying the config:

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