Modul Parse fehlgeschlagen: Fehler: semantic/dist/semantic.min.css Unerwartetes Zeichen '@' (11: 0)

Question

Ich benutze die aktuelle Version von react-boilerplate (die Webpack verwendet) und installiert Semantic-UI-React wie in den offiziellen Dokumenten beschrieben http://react.semantic-ui.com/usage

Wenn ich der Server zu starten, erhalte ich:

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 

Welche Art von ‚geeigneten loader‘ benötige ich?

Der Parser nicht die @import Anweisung in /semantic/dist/semantic.min.css mag:

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

Wie dieses Problem zu lösen?

Answer 1

Ich könnte das Problem mit der Installation von Sass-Loader lösen - da ich scss sowieso verwenden werde.

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

Umbenennungs ./semantic/dist/semantic.min.css-./semantic/dist/semantic.min.scss und die Config ändern:

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

Answer 2

Wenn Sie mit einer Richtlinie in der Regel sind sicher, auch umfassen node_modules:

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

That sollte das Problem beheben, während Sie webpack anweisen, sicher zu stellen, dass Knotenmodule beim Laden von css eingeschlossen werden, damit es u den css-loader beim Importieren des semantischen ui css-Pakets tilisieren.

Answer 3

Schritt 1: Installieren von Paketen folgende

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

Schritt 2: Dann in webpack.config.js Datei:

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

Schritt 3: In-Module,

Wenn Sie semantische installiert css über npm Paket npm install --save-dev semantic-ui-css, dann sollte der Eintrag import './node_modules/semantic-ui-css/semantic.min.css'

sein

Verwenden Sie relavent import statment, wenn Sie semantic-ui-css über npm nicht installiert haben.