webpack error Invalid CSS after "...ackground-color":ERROR in ../~/css-loader!../~/sass-loader!./sass/color.scss Module build failed:
<p>i have my webpack.config.js setup like this</p>

<pre><code>   var path=require('path');
   var webpack=require('webpack');
   var htmlWebpackPlugin=require('html-webpack-plugin');
   var ExtractTextPlugin=require('extract-text-webpack-plugin');
  //var             CommonsChunkPlugin=require('webpack/lib/optimize/CommonsChunkPlugin');
   module.exports={
    devtool:'eval',
    context:path.join(__dirname,'src'),
    entry:{
    app:'./app/app.js',
     about:'./about/about.js',
         //vendors:['jquery']
      },
     output:{
     path:path.join(__dirname,'dist'),
     filename:'[name].bundle.js'
  },
     module:{
         preLoaders:[
             {
                 test:/\.js?$/,
                  include:path.join(__dirname,'src'),
                  loader:'jshint-loader'
              }
         ],
          loaders:[
              {
                  test:/\.js$/,
                  loader:'babel-loader',
                  include:path.join(__dirname,'src'),
                   exclude:/node_module/
               },
              {
                  test:/\.css$/,
                  loader:'css-loader',
                   include:path.join(__dirname,'src','css'),
                    },
              {
                   test:/\.scss$/,
                 loader:'style-loader!css-loader!sass-loader',         include:path.join(__dirname,'src','sass')
                        },
                {
                  test:/\.(png|jpg)$/,
                  loader:'url-loader?limit=8192',
                   include:path.join(__dirname,'src','images')
                }
           ]  
        },
      jshint:{
          'esnext':true
                 },
     devServer:{
           contentBase:path.join(__dirname,'dist'),
         inline:true,
          stats:{colors:true,
                  reasons:true,
                 chunks:false}

         },
            plugins:[

          new htmlWebpackPlugin({
               template:path.join(__dirname,'src','index.html'),
               hash:true,
               chunks:['app','sass','css','images']
                }),
               new htmlWebpackPlugin({
           template:path.join(__dirname,'src','about.html'),hash:true,
           filename:'about.html',
           chunks:['about','sass','css','images']
           })
        //new CommonsChunkPlugin({
         // name:['commons','vendors','bootstrap']
        //})
       ],watch:true
       };
</code></pre>

<p>and while i compile scss it gives me error on terminal
says :</p>

<pre><code>ERROR in ../~/css-loader!../~/sass-loader!./sass/color.scss
Module build failed: 
                       background-color: #A6206A;
                      ^
      Invalid CSS after "...ackground-color": expected 1 selector or at-rule, was ": #A6206A;"
      in /Users/rikrik/Desktop/mrjudo.net/mrjudo.net/src/sass/color.scss (line 3, column 24)
 @ ./sass/color.scss 4:14-122

ERROR in ../~/css-loader!../~/sass-loader!./sass/achieve.scss
Module build failed: 
                       background-color: #A6206A;
                      ^
      Invalid CSS after "...ackground-color": expected 1 selector or at-rule, was ": #A6206A;"
      in /Users/rikrik/Desktop/mrjudo.net/mrjudo.net/src/sass/color.scss (line 3, column 24)
 @ ./sass/achieve.scss 4:14-124
</code></pre>

<p>here is i write in my script </p>

<pre><code>require('../sass/achieve.scss');
require('../sass/color.scss');
</code></pre>

<p>and in my scss </p>

<pre><code>@import "./color";
@import "./import";
$max-width:1900px;
$rem:1/16;
$five:3.125em;
$ten:6.25em;
$twoten:12.5em;
ul,li,ol{

    list-style: none!important;

}
</code></pre>

<p>anyone knows how to fix this ? 
and here is the color.scss</p>

<pre><code>$smooth-purple: background-color: #A6206A;
                    $smooth-red: background-color: #ec1c4b;
                    $smooth-orange: background-color: #f15a43;
</code></pre>