webpack打包css报错找不到模块？

Question

环境：webpack3.10.0

webpack.config.js配置如下：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: {

        app: "./js/index.js"

    },

    module: {

        loaders: [{

                test:/\.html$/,

                loader:"html-loader"

            },

            {

                test:/\.css$/,

                loader:"style-loader!css-loader"

            },

            {

                test:/\.scss$/,

                loader:"style-loader!css-loader!sass-loader!"

            }

        ]

    },

    plugins:[new HtmlWebpackPlugin({

        template:"./views/index.html"

    })],

    

    output: {

        filename: "[name].js",

        path: path.resolve(__dirname, 'dist')

    }

}

文件目录：

报错信息：

入口文件：

import './css/index.css';

console.log('hello world');

更新：

修改样式文件路径后index.css可以成功解析，但是换成index.scss后解析就失败了。

报错信息：

ERROR in ./js/index.js

Module not found: Error: Can't resolve '' in 'D:\onepage'

 @ ./js/index.js 1:0-27

Child html-webpack-plugin for "index.html":

     1 asset

       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./views/index.html 339 bytes {0} [built]

Answer 1

这里的scss配置应该写成：{    test: /\.scss/,    use: extractTextPlugin.extract({    use:[{    loader:'css-loader'    },{    loader:'sass-loader'    }],    fallback:'style-loader'    })}