Shirley~~ 2022-09-20 19:52 采纳率: 90%
浏览 15
已结题

webpack加载css文件

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

想通过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文件,请各位解惑,感谢

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-09-21 09:38
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月29日
  • 已采纳回答 9月21日
  • 创建了问题 9月20日

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 flask项目,怎么使用AJAX传数据库数据到echarts图表的data里,实现异步加载数据。
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题