Problem with webpack + css

[ayxos]

Hi, I have a problem when i run react with the css

node_modules/react-chat-window/lib/styles/emojiPicker.css:1
[2] (function (exports, require, module, __filename, __dirname) { .sc-emoji-picker {
[2]                                                               ^
[2]
[2] SyntaxError: Unexpected token .

Any clue why is this happening?

I am using Webpack v1.13.1

[dharness]

Hmm, are you using a css-loader ?

[ayxos]

@dharness yes. Here is my conf:

        test: function(absPath) {
            return (absPath.search('.scss') !== -1);
        },
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader', 
                options: { 
                    minimize: true, 
                    importLoaders: 1 
                } 
            },
            { loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: function() {
                        return [
                            require('autoprefixer')({
                                browsers: [
                                    "> 5%",
                                    "last 2 versions"
                                ]
                            })
                        ]
                    }
                }
            },
            { loader: 'sass-loader' }
        ]

I tried with this as well and fails:

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',

        // Could also be write as follow:
        // use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
        use: [
            {
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            },
            'postcss-loader'
        ]
    }),
},

[dharness]

Does it fail in the exact same way in case 2? If so, I'll have to look into this more thoroughly. My only other thoughts are to a) pare down the second config to the basics - removing the fallback (is that a 2.x feature) and using:

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

b) try upgrading webpack.

If you cannot get that to work, and you really feel it is a problem on my end you can generate a small repo that reproduces the error.

[ayxos]

Sorry I forgot, the second example is with webpack last version (v3.x)