webpack里面引入的sass老是报错

Question

我想尝试着搭建一个可以混合使用css，less，sass的项目。参照webpack官网配置的。我用一个less文件做样式入口，然后@import其他的样式文件。可是在引入sass文件时老是报错,求大神给看看。

webpack配置文件

const path = require ( 'path' )
const webpack = require ( 'webpack' )
const HtmlPlugin = require ( 'html-webpack-plugin' )
const CleanPlugin = require ( 'clean-webpack-plugin' )
const ExtractPlugin = require ( 'extract-text-webpack-plugin' );

const ExtractLess = new ExtractPlugin ( {
        filename : "[name].[contenthash].css" ,
} )
module.exports = {
        entry : {
                app : './src/index.js'
        } ,
        output : {
                path : path.resolve ( __dirname , 'dist' ) ,
                filename : '[name]-[chunkhash].js' ,
                chunkFilename : "[name]-chunk.js"
        } ,
        module : {
                rules : [
                        {
                                test : /\.less$/ ,
                                use : ExtractLess.extract ( {
                                        use : [
                                                { loader : 'css-loader' } ,
                                                { loader : 'less-loader' }
                                        ] ,
                                        fallback : 'style-loader'
                                } )
                        } ,
                        {
                                test : /\.scss$/ ,
                                use : [
                                        { loader : 'style-loader' } ,
                                        { loader : 'css-loader' } ,
                                        { loader : 'sass-loader' }
                                ]
                        }
                ]
        } ,
        plugins : [
                new CleanPlugin ( [ 'dist' ] ) ,
                new HtmlPlugin ( {
                        title : '插件自动生成的页面' ,
                        template : './index.html'
                } ) ,
                new webpack.optimize.CommonsChunkPlugin ( {
                        name : 'manifest'
                } ) ,
                ExtractLess
        ]
}

备注：里面所需要的各种loader插件什么的该下载了，我都参照官网npm install了。

报错信息

clean-webpack-plugin: D:\MyAssets\webpack-3-1\dist has been removed.
Hash: 929a0fc027508c020baa
Version: webpack 3.10.0
Time: 1727ms
                           Asset       Size  Chunks             Chunk Names
     app-5e2b60814625e85e8f4e.js    1.32 kB       0  [emitted]  app
manifest-490e86b2e25d1c4799ec.js     5.8 kB       1  [emitted]  manifest
                      index.html  446 bytes          [emitted]  
   [0] ./src/index.js 21 bytes {0} [built]
   [1] ./src/hello.less 822 bytes {0} [built] [failed] [1 error]
   [2] ./node_modules/less-loader/dist/stringifyLoader.js!./src/good.scss 1.19 kB [built]
   [3] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less 301 bytes [built] [failed] [1 error]
    + 2 hidden modules

ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less
Module build failed: 

// load the styles
var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
          ^
Unrecognised input
      in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
 @ ./src/hello.less 4:14-115
 @ ./src/index.js

ERROR in ./src/hello.less
Module build failed: ModuleBuildError: Module build failed: 

// load the styles
var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
          ^
Unrecognised input
      in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
    at runLoaders (D:\MyAssets\webpack-3-1\node_modules\webpack\lib\NormalModule.js:195:19)
    at D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (D:\MyAssets\webpack-3-1\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/hello.less
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 731 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js!src/hello.less:
       [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less 301 bytes {0} [built] [failed] [1 error]
       [1] ./node_modules/less-loader/dist/stringifyLoader.js!./src/good.scss 1.19 kB [built]
    
    ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/hello.less
    Module build failed: 
    
    // load the styles
    var content = require("!!../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!./good.scss");
              ^
    Unrecognised input
          in D:\MyAssets\webpack-3-1\src\good.scss (line 4, column 12)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-3-1@1.0.0 dev: `webpack --colors`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-3-1@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2017-12-30T02_23_18_602Z-debug.log