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。

webpack错误“... ackground-color”后的CSS无效：../~/css-loader！... /〜/ skip-loader！。/ skip / color.scss中的错误模块构建失败：

1 个答案: