mardi 21 juin 2016

“You may need an appropriate loader to handle this file type” with Webpack and CSS

I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a:

“You may need an appropriate loader to handle this file type”

One the first line of my css file. The CSS file is simple:

body {
    color:red
}

The webpack.config.js looks like this:

module.exports = {
    debug: true,
    entry: [ './sdocs.js' ],
    output: {
        filename: './[name].bundle.js'
    },
    loaders: [
        { test: /.css$/, loader: "style-loader!css-loader" },
    ],
}

sdocs.js is also simple and looks like this:

require('./sdocs.css');

Finally the result of running webpack look like this:

ERROR in ./sdocs.css
Module parse failed: C:UsersTimPhpstormProjectsxxxsdocs.css
Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
at Parser.pp.raise (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:923:13)
at Parser.pp.unexpected (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1490:8)
at Parser.pp.semicolon (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1469:73)
at Parser.pp.parseExpressionStatement (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1994:8)
at Parser.pp.parseStatement (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1772:188)
at Parser.pp.parseTopLevel (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1666:21)
at Parser.parse (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:1632:17)
at Object.parse (C:UsersTimPhpstormProjectsxxxnode_modulesacorndistacorn.js:885:44)
at Parser.parse (C:UsersTimPhpstormProjectsxxxnode_moduleswebpacklibParser.js:902:15)
at DependenciesBlock.<anonymous> (C:UsersTimPhpstormProjectsxxxnode_moduleswebpacklibNormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:UsersTimPhpstormProjectsxxxnode_moduleswebpack-corelibNormalModuleMixin.js:310:10)
at nextLoader (C:UsersTimPhpstormProjectsxxxnode_moduleswebpack-corelibNormalModuleMixin.js:275:25)
at C:UsersTimPhpstormProjectsxxxnode_moduleswebpack-corelibNormalModuleMixin.js:259:5
at Storage.finished (C:UsersTimPhpstormProjectsxxxnode_modulesenhanced-resolvelibCachedInputFileSystem.js:38:16)
at C:UsersTimPhpstormProjectsxxxnode_modulesgraceful-fsgraceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./sdocs.js 1:0-22

I have triple checked, css-loader and style-loader are loaded at the local level. I had them installed globally at first, but i removed them globally and reinstalled them locally. BTW, the debug flag did nothing extra, no change in output, which i thought was weird.

I am running on a windows platform is that matters

Aucun commentaire:

Enregistrer un commentaire