webpack錯誤「...... ackground-color」後面的CSS無效：../~/css-loader!../~/sass-loader!./sass/color.scss中出現錯誤模塊構建失敗：

Question

我有我webpack.config.js設置這樣

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 
     }; 

，雖然我編譯SCSS它給了我錯誤的終端 說：

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 

這裏是我在我的腳本編寫

require('../sass/achieve.scss'); 
require('../sass/color.scss'); 

和我的scss

@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; 

} 

任何人都知道如何解決這個問題？ 這裏是color.scss

$smooth-purple: background-color: #A6206A; 
        $smooth-red: background-color: #ec1c4b; 
        $smooth-orange: background-color: #f15a43; 

Answer 1

的問題是由於無效SCSS語法。

您無法將特定的CSS屬性分配給SCSS variables。您分配值，並用它以後分配給屬性：

$smooth-purple: #A6206A; 
$smooth-red: #ec1c4b; 
$smooth-orange: #f15a43; 

.my-class { 
    background-color: $smooth-purple; 
} 

如果你想在一個通用的方法分配特定的屬性，你可以使用SCSS mixins。