Webpack Fehler "Unexpected token" wirft, wenn CSS Laden

Question

Ich habe versucht, vorkompilierte Datei semantic.css in Eintrag index.js, webpack zu importieren berichtet:

 
ERROR in ../semantic/dist/semantic.css 
Module parse failed: /home/khoa/projects/mystack/test/semantic/dist/semantic.css Unexpected character '@' (11:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '@' (11:0) 

Also ich vermutete ich einige loader verpasst CSS @import url Anweisung zu laden. Ich habe viele Stunden gegoogelt, verschiedene Loader ausprobiert und einfach nicht den Trick gemacht. Danach bemerkte ich, dass, was auch immer ich Ladefeld von CSS-Datei, die Ergebnisse sind die gleichen. (Und auch ein paar Sachen mit allen Erweiterungen funktionieren mit rohen Lader.)

{ 
    test: /\.css$/, 
    include: path.resolve(__dirname, '../semantic/dist'), 
    loader: 'style!css!postcss' // whatever I put here doesn't matter 
}, 

Ich habe versucht, Computer neu zu starten und alle Module neu installieren, aber nichts geändert. Also denke ich, dass das Problem Webpack ist.

Answer 1

Wenn Sie auf Windows sind, müssen Sie eine Arbeit um den Pfad arbeiten.

const path = require("path"); 
const srcPath = path.join(__dirname, 'src'); 

Ich empfehle Ihnen, die ExtractTextPlugin überprüfen (https://github.com/webpack/extract-text-webpack-plugin).

den Pfad zu Ihrem Lader hinzufügen:

loaders: [ 
     {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} 
     } 
    ] 

Auch Sie haben den Pfad zu Ihrem Lader hinzuzufügen, ziehe ich es in einem konstanten zu tun, aber dies sollte auch funktionieren.

{ 
     test: /\.css$/, 
     include: path.resolve(__dirname, '../semantic/dist'), 
     loader: 'style!css!postcss&includePaths[]=' + path.resolve(__dirname, "./src") 
    }, 

Fügen Sie auch die Entschlossenheit:

resolve: { 
    extensions: ["", ".js", ".css"], 
    modulesDirectories: ["src", "node_modules"], 
    root: [__dirname + path.sep + 'scripts'], 
    }