webpack加载css文件

Question

问题遇到的现象和发生背景

想通过webpack加载css文件，在使用webpack命令时

用代码块功能插入代码，请勿粘贴截图

var path = require('path')//引入node中的一个内置的path模块，专门用于解决路径问题
module.exports = {
    mode:'development',//工作模式
    entry:'./src/js/app.js',//入口文件
    output:{//出口文件
        path:path.resolve(__dirname,'g build/js'),
        filename:'app.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',//创建style标签，将样式资源插入，添加到head中生效
                    'css-loader'//将css文件变成commonjs模块加入到js中，里面内容是样式字符串
                ]
            }
        ]
    }
}

运行结果及报错内容

ERROR in ./src/css/test.css (./node_modules/css-loader/dist/cjs.js!./src/css/test.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (D:\shirley\前端\0尚硅谷\13 webpack\node_modules\css-loader\dist\index.js:31:27)
@ ./src/css/test.css 2:12-89 9:17-24 13:15-22
@ ./src/js/app.js

我的解答思路和尝试过的方法

我查阅了网上资料，说可能是style-loader与css-loader的顺序问题，或者是style-loader版本问题，我的顺序没有问题，我就去查阅版本，修改了style-loader的版本，还是不正确

我想要达到的结果

运行不错错，正确加载css文件，请各位解惑，感谢

Answer 1

less-loader 版本过高
1.npm uninstall less-loader
2.npm install less-loader@5.0.0

我看你的 是css-loader 报错
1.npm uninstall css-loader
2.npm install css-loader@5.0.0