Module build failed: Syntax Error, Unnecessary curly bracket

[NikhilP007]

Css

html,
body {
  border: 0;
  font-family: 'Conv_ProximaNova-Regular', Sans-Serif !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
}

postcss.config.js

module.exports = {
    parser: 'sugarss',
    plugins: {
      'postcss-import': {},
      'postcss-cssnext': {},
      // 'autoprefixer': {},
      'cssnano': {}
    }
  }

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './app/polyfills.ts',
    'vendor': './app/vendor.ts',
    'app': './app/main.ts'
  },

  resolve: {
    extensions: ['.js','.ts']
  },

  module: {
    rules: [ 
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('app', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      }
    // ,
    //   {
    //     test: /\.html$/,
    //     loader: 'html-loader'
    //   }
    ,
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      }
    ,
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader:  [
          // 'css-loader?sourceMap',
          //?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader'
        ]
        //'css-loader?sourceMap' 
      })
      }
    //   {
    //     test: /\.css$/,
    //     include: helpers.root('src', 'app'),
    //     loader: 'raw-loader' 
    //   }
    ]
  },

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./app'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

Issue.zip

[ai]

Can you add error stacktrace?

[michael-ciniawsky]

webpack, extract-text-webpack-plugin, postcss-loader version (package.json) && Error Logs/Stacktraces please :) Out of the gut, I think the issue is here

postcss.config.js

module.exports = {
-    parser: 'sugarss', // <= SyntaxError
    plugins: {
-     'postcss-import': {}, // css-loader handles @import no need for this plugin in webpack
      'postcss-cssnext': {},
      'autoprefixer': {},
      'cssnano': {}
    }
}

SugarSS is whitespace sensitive convenience syntax for CSS, if you intend to use it use the .sss extension instead and a {Function} in postcss.config.js

index.sss

html,
body
  border: 0;
  font-family: 'Conv_ProximaNova-Regular', Sans-Serif !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;

index.css

html,
body {
  border: 0;
  font-family: 'Conv_ProximaNova-Regular', Sans-Serif !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
}

postcss.config.js

+ module.exports = ({ file, options, env }) => ({
+  parser: file.extname === '.sss' ? 'sugarss' : false, // Handles `.css` && '.sss' files dynamically
    plugins: {
      'postcss-cssnext': {},
      'autoprefixer': {},
+     'cssnano':  env === 'production'  ? {} : false
    }
})

[michael-ciniawsky]

Module build failed: Syntax Error, Unnecessary curly bracket

Yep 😛 as the issue title suggest you are using a custom parser for plain .css files, the sugarss parser is not needed by default (see my comment above)