精选文章 vscode——VUE webpack中配置css文件以及less文件还有图片文件的处理——踩坑

vscode——VUE webpack中配置css文件以及less文件还有图片文件的处理——踩坑

作者:失忆爆表症 时间: 2020-07-27 11:01:15
失忆爆表症 2020-07-27 11:01:15

我按照b站vue.js中配置,完全一毛一样,但是还是出现了这个东西: 

 

vscode——VUE webpack中配置css文件以及less文件还有图片文件的处理——踩坑1 然后百度搜索:

TypeError: this.getResolve is not a function

然后是说出现sass的版本太高。。。。。 可我完全没有安装sass,然后秉承着初生牛犊不怕虎的态度,大不了再来一次,把原来版本卸载,安装了视频老师的版本

卸载的命令为:

npm uninstall css-loader --save-dev
npm uninstall style-loader --save-dev

 

我安装了css-loader 2.0.2版本,和style-loader 0.23.1版本,安装命令如下:

npm install css-loader@2.0.2 --save-dev
npm install style-loader@0.23.1 --save-dev

安装成功就可以在package.json里看到了

vscode——VUE webpack中配置css文件以及less文件还有图片文件的处理——踩坑2

然后输入命令运行:

npm run build

出现下面这个图片这个为成功:

vscode——VUE webpack中配置css文件以及less文件还有图片文件的处理——踩坑3

这是css的配置,同样less的配置也是版本过高,安装了 

"less": "^3.9.0",

"less-loader": "^4.1.0",

两个版本

命令如下:

npm install --save-dev less-loader@4.1.0 less@3.9.0

就可以了 

图片处理配置的版本为

"url-loader": "^1.1.2",

命令如下:

npm install --save-dev url-loader@1.1.2

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

您可能感兴趣

  • 前端知识点整理收集(不定时更新~)

    知识点都是搜集各种大佬们的,如有冒犯,请告知! 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...

  • Vue面试题总结(2019最新)

    计算属性如何使用 Vue模板中的表达式很便利,但放入太多的逻辑会让html模板过重 难以维护;所以我们把复杂的逻辑处理放到计算属性里使用 我们可以像绑定普通属性一样绑定计算属性,因为计算属性依赖于data 中的数据,当数据发生改变时,计算属性也会更新。 watch 如何使用 Watch用来监测vue实例上的数据变动,对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包...

  • Vue使用日记(13):webpack详解(二)

    上一篇我们解释了webpack是什么,以及webpack、node和npm的关系。 现在说明webpack的安装和配置。 1)安装Node.js 安装webpack之前检查Node是否安装: node -v 说明:具体安装Node.js过程可以查看菜鸟教程:https://www.runoob.com/nodejs/nodejs-install-setup.html。 2)安装webpack...

  • vue--环境搭建

    开篇 原文地址:www.ccode.live/lentoo/list… 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题...

  • 创业一年半项目经验分享

    2017年9月从上家公司离职到现在,足足有1年半了,现在我把这一年半摸爬滚打总结出来的经验传授给大家。咳咳,开玩笑的,我也在不断的学习中,不敢妄自尊师,写这篇文章主要是想把自己的一些看法和想法以及处理项目的方法分享出来一起交流,说不定会遇到高人指点,突破瓶颈。 创业,九死一生,别说能不能赚钱,能把项目做出来上线已经不错了。所以没有背水一战的决心,真别趟这塘浑水。虽然自个儿做项目很自由,但要做...

  • webpack4配置详解之一步一步跟我做

    前言   经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。   今天就尝试着一起来聊聊Webpack吧,旨在帮大家加深理解、新手更容易上路,都能从0到1搭建配置自定属于自己的脚手架,或对已封装好的脚手架有进一步的巩固,接下来苏南会详细讲解webpack中的每一个配置字段的作...

  • webpack4.x最详细入门指南

    前言 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,所以本文也比较长,但如果你能动手跟着本文中的例子完整写一次,相信你会觉得Webpack也不过如此。 一、什么是webpack,为什么使用它? 1.1 什么是webpack? 简单来说,它其实就是一个模块打包器。 1.2 为什么使用它? 如果像以前开发时一个html文件可能会引用十...

  • 如何成为一名优秀的程序员?

    作为一个从业快10年的程序员,我想给新入行的程序员们一些建议。这些建议是我希望自己可以在毕业时就读到的,也希望它们可以帮助你成为一个更好的程序员。 简单归纳一下,总共有7条: 保持健康 编程之外的爱好 持续学习 正确应对犯错 不要囿于角色 展示你的创意 刻意练习手速 下面我来详细说说每一点。 保持健康 三寸气在千般用,一旦无常万事休。 ——《金瓶梅》 首先要说的当然是健康,脱离了这个本钱,一...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。