CSS_MODULES：模块构建失败，带有extract-text-webpack-plugin

Question

When I extract CSS with CSS modules in production environment, it reports an error, but it goes well in development environment.

webpack.base.js

const path = require("path")
const webpack = require("webpack")

module.exports = function(env) {
  return {
    entry: {
      main: path.resolve(__dirname, "../src/main.js"),
    },
    output: {
      path: path.resolve(__dirname, "../dist"),
      sourceMapFilename: "[name].map",
      publicPath: "/",
      filename: (env === "dev") ? "[name].js" : "[name].[hash:16].js",
    },
    resolve: {
      extensions: [".ts", ".js", ".json"],
      modules: [path.join(__dirname, "../src"), "node_modules"]
    },
    module: {
      loaders: [{
          test: /\.jsx?$/,
          use: ["babel-loader"],
          exclude: "/node_modules/"
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: ["url-loader?limit=20000&name=images/[hash:16].[ext]"],
          exclude: "/node_module/"
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader?modules", "postcss-loader", "sass-loader"],
          exclude: ["/node_module/", path.resolve(__dirname, "../static")]
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
          include: path.resolve(__dirname, "../static")
        },
      ],
    },
  }
}

webpack.prod.js

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: {
      loaders: [{
          test: /\.scss$/,
          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: /\.scss$/,
          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];
          }
        }
      })
    ]
  })
}

webpack.dev.js

const path = require("path");
const webpack = require("webpack")
const webpackMerge = require("webpack-merge");
const OpenBrowserPlugin = require("open-browser-webpack-plugin");
const autoprefixer = require("autoprefixer");
const precss = require("precss");

const baseConfig = require("./webpack.base.js");
const config = require("./config");
const port = config.port;

module.exports = function(env){
    console.log(`
#################################################
  Server is listening at: http://localhost:${config.port} 
#################################################
    `);
    return webpackMerge(baseConfig(env),{
        entry:[
            "react-hot-loader/patch",
            "webpack-dev-server/client?http://localhost:" + port,
            "webpack/hot/only-dev-server",
            path.resolve(__dirname,"../src/main.js"),
        ],
        devtool: "cheap-module-source-map",
        plugins:[
            new webpack.HotModuleReplacementPlugin(),
            new OpenBrowserPlugin({ url: "http://localhost:" + port }),
            new webpack.LoaderOptionsPlugin({
                options:{
                    postcss(){
                        return[precss, autoprefixer];
                    }
                }
            })
        ],
        devServer:{
            hot:true,
            port:config.port,
            historyApiFallback:true,
        }
    })
}

Error message in console

ERROR in ./~/css-loader?modules!./~/postcss-loader!./~/sass-loader/lib/loader.js!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/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-512
 @ ./src/components/Welcome/index.js
 @ ./src/router/components.js
 @ ./src/router/index.js 
 @ ./src/main.js

What's the matter with my code and how can I fix it? I think the problem is extract-text-webpack-plugin, but I don't know what goes wrong here.

Answer 1

I changed my webpack.prod.js

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:{
           // modified goes here
            rules:[
                {
                    test:/\.jsx?$/,
                    use:["babel-loader"],
                    exclude:"/node_modules/"
                },
                { 
                    test: /\.(png|jpg|gif)$/, 
                    use: ["url-loader?limit=20000&name=images/[hash:16].[ext]"], 
                    exclude: "/node_module/" 
                },
                { 
                    test: /\.s?css$/, 
                    use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: [
                                "css-loader?minimize&modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]",
                                "sass-loader",
                                "postcss-loader"
                            ]
                         }),
                    exclude: ["/node_module/",path.resolve(__dirname,"../static")]
                },
                { 
                    test: /\.s?css$/, 
                    use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: [
                                "css-loader?minimize",
                                "sass-loader",
                                "postcss-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];
                    },
                    sassLoader: {
                        sourceMap: true
                    },
                }
            })
        ]
    })
}