[css modules]提取出错

Question

在使用 extract-text-webpack-plugin 插件提取 css modules 后出错。

0.详细描述

自己搭建的 react 脚手架，准备加入 css modules 功能，开发环境下工作正常，构建时出错（在提取 css 时），如果不使用 css modules 是正常的。请大家帮忙看一下是什么问题

1.webpack 配置（生产环境）

const path = require("path");
const webpack = require("webpack");
const webpackMerge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const HTMLWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const precss = require("precss");
const baseConfig = require("./webpack.base.js");
const config = require("./config.js");
const vendor = config.vendor;

module.exports = function(env){
    return webpackMerge(baseConfig(env),{
        entry:{
            main:path.resolve(__dirname,"../src/main.js"),
            vendor,
        },
        module:{
        // 问题就出在这里，提取 css 的时候
            loaders:[
                { 
                    test: /\.s?css$/, 
                    loaders: ExtractTextPlugin.extract({ 
                        fallbackLoader: "style-loader",
                        use: [
                           "css-loader?minimize&modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]",
                           "postcss-loader",
                           "sass-loader"
                        ]

                    }), 
                    exclude: ["/node_module/",path.resolve(__dirname,"../static")]
                },
                { 
                    test: /\.s?css$/, 
                    loaders: ExtractTextPlugin.extract({ 
                        fallbackLoader: "style-loader",
                        use: [
                           "css-loader?minimize",
                           "sass-loader"
                       ]
                    }), 
                    include: path.resolve(__dirname,"../static")
                },
            ],
        },
        plugins:[
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    screw_ie8: true,
                    conditionals: true,
                    unused: true,
                    comparisons: true,
                    sequences: true,
                    dead_code: true,
                    evaluate: true,
                    if_return: true,
                    join_vars: true,
                },
                output: {
                    comments: false,
                },
            }),
            new ExtractTextPlugin({
                filename:"style.[contenthash:16].css",
                disable:false,
                allChunks:true,
            }),
            new HTMLWebpackPlugin({
                template:"src/index.html" 
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ["vendor","manifest"]
            }),
            new webpack.DefinePlugin({
                "process.env": { 
                    NODE_ENV: JSON.stringify("production") 
                }
            }),
            new webpack.LoaderOptionsPlugin({
                options:{
                    postcss(){
                        return[precss, autoprefixer];
                    }
                }
            })
        ]
    })
}

2.构建时错误代码

ERROR in ./~/css-loader?modules!./~/postcss-loader!./~/sass-loader/lib/loader.js!./~/extract-text-webpack-plugin/loader.js?{"omit":0,"remove":true}!./~/css-loader?minimize&modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/components/Welcome/style.scss
Module build failed:
        display: flex;
              ^
      Invalid CSS after "module.exports": expected "{", was '= {"box":"style_box'
      in C:\Users\Charley\Desktop\myproj\gogogo\src\components\Welcome\style.scss (line 2, column 16)
 @ ./src/components/Welcome/style.scss 4:14-468
 @ ./src/components/Welcome/index.js
 @ ./src/router/components.js
 @ ./src/router/index.js
 @ ./src/main.js

3.浏览器端错误代码（与构建时的错误一致）

Uncaught Error: Module build failed: 
    display: flex;
              ^
      Invalid CSS after "module.exports": expected "{", was '= {"box":"style__bo'
      in C:\Users\Charley\Desktop\myproj\gogogo\src\components\Welcome\style.scss (line 2, column 16)
    at Object.307 (main.81f9a616ac325448.js:1)
    at r (manifest.81f9a616ac325448.js:1)
    at Object.308 (main.81f9a616ac325448.js:1)
    at r (manifest.81f9a616ac325448.js:1)
    at Object.298 (main.81f9a616ac325448.js:1)
    at r (manifest.81f9a616ac325448.js:1)
    at Object.303 (main.81f9a616ac325448.js:1)
    at r (manifest.81f9a616ac325448.js:1)
    at Object.133 (main.81f9a616ac325448.js:1)
    at r (manifest.81f9a616ac325448.js:1)

4.css代码（这个应该没啥问题）

.box{
    display: flex;
}

5.相关组件的js代码

import React,{ Component } from "react";
import classNames from "classnames";
import style from "./style.scss";

export default class App extends Component{
    render(){
        const classnames = classNames({
            a:true,
            b:false,
            c:1
        });

        return(
            <div className={classnames}>Welcome~~</div>
        )
    }
}