CODEWITHSUNDEEP
webpack-style-loader
Israel
Israel

Reputation: 495

webpack css "SyntaxError: Unexpected token {"

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

Upvotes: 0

Views: 1848

Answers (1)

Israel
Israel

Reputation: 495

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"},
        ]
    }
};

Upvotes: 1

Related Questions