sass and css loader, throw error

[cxwwa]

HI, When I use sass、postcss、css loader handle scss file, and "// }" in file annotations.

throw error: CssSyntaxError: index.scss: Unknown word

this is my config:

// ...import some thing... 
HappyPack.SERIALIZABLE_OPTIONS = HappyPack.SERIALIZABLE_OPTIONS.concat(['postcss'])

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js|\.jsx$/,
                include: source_modules,
                loaders: ["happypack/loader?id=js"]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "happypack/loader?id=css")
            },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "happypack/loader?id=scss") },
            { test: /\.vue$/, include: source_modules, loader: "vue-loader" }
        ]
    },
    postcss: function () {
        return [
            AutoPrefixer({browsers: ['last 20 versions']})
        ]
    },
    vue: {
        postcss: [
            AutoPrefixer({browsers: ['last 20 versions']})
        ],
        loaders: {
            css: ExtractTextPlugin.extract("style", "happypack/loader?id=css"),
            less: ExtractTextPlugin.extract("style", "css!less"),
            sass: ExtractTextPlugin.extract("style", "happypack/loader?id=scss"),
            scss: ExtractTextPlugin.extract("style", "happypack/loader?id=scss"),
            js: "happypack/loader?id=js"
        }
    },
    plugins: [
        new HappyPack({
            id: 'js',
            verbose: false,
            loaders: ['babel-loader']
        }),
        new HappyPack({
            id: 'css',
            verbose: false,
            loaders: ['css-loader!postcss-loader']
        }),
        new HappyPack({
            id: 'scss',
            verbose: false,
            loaders: ['css-loader!postcss-loader!sass-loader']
        }),
    ]
};

[amireh]

You can't pass functions to postcss and have it run through HappyPack. Instead you must define your postcss configuration in a separate file and tell the postcss-loader to use that file.

The following statement is not doing what you expect because we can't serialize functions:

HappyPack.SERIALIZABLE_OPTIONS = HappyPack.SERIALIZABLE_OPTIONS.concat(['postcss'])

[cxwwa]

ok, I'll try. thank your reply.