webpack css "SyntaxError: Unexpected token {"

Question

I'm new to webpack, trying to configure webpack to pack my CSS files with these loaders:

'use strict';
require('./hosted/.tmp/styles/test.css');

module.exports = {
    devtool: 'eval-source-map',
    entry: {
        js:  './hosted/.tmp/scripts/script*.js'
    },
    output: {
        path: __dirname + './hosted',
        filename: 'dcae-bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: "style-loader!css-loader"}
        ]
    }
};

I have only one file test.css with the following:

body,html{height:100%}

When running webpack, I'm getting the error:

C:\Development\Angular\Others\PounchOut\dcaeapp\hosted\.tmp\styles\test.css:1
(function (exports, require, module, __filename, __dirname) { body,html{height:100%}
                                                                  ^
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Development\Angular\Others\PounchOut\dcaeapp\webpack.config.js:3:1)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)

What is the problem?

Thanks in advance

Israel · Accepted Answer · 2016-10-23 09:24:10Z

1

I found the problem, I do not need to use the require with path to the file. This is the final web.config:

'use strict';

module.exports = {
    devtool: 'eval-source-map',
    entry: {
        js:  ['./hosted/.tmp/scripts/scripts.js','./hosted/.tmp/styles/main.css']
    },
    output: {
        path: __dirname + '/hosted',
        filename: 'dcae-bundle.js'
    },
    module: {
        loaders: [
            {test: /\.(js|jsx)$/, loaders: ['babel-loader'], exclude: /node_modules/},
            {test: /\.css$/, loader: "style-loader!css-loader"},
        ]
    }
};

answered Oct 23, 2016 at 9:24

Israel

4952 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

webpack css "SyntaxError: Unexpected token {"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related