下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:VUE中使用SCSS

作者:彼岸心情     来源: https://www.cnblogs.com/xjguan/p/11532824.html点击数:665发布时间: 2020-03-04 19:44:53

标签: HTMLSCSSVUE

Web开发

  随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是css便诞生了。

  第一步

  安装scss依赖,cnpminode-sasssass-loader-D

  注:sass-loader用来解析scss文件(-D是--save-dev的简写)

  第二步:

  在build文件夹下的webpack.base.conf.js的rules里面添加配置

  {

  test:/\\.scss$/,

  loaders:['style','css','sass']

  }

  第三步:

  scss使用测试:如下测试修改字体颜色

  <stylelang="scss">

  $color:red;

  div{color:$color;}

  </style>

  安装完成后,运行时出现了错误

  Modelebuildfailed:TypeError:this.getResolveisnotafunctionatObject.loader...

  这是因为当前sass的版本太高,webpack编译时出现了错误,只需要换成低版本的就行,下面说一下修改方法,

  找到package.json文件,里面的"sass-loader"的版本更换掉就行了。

  安装的sass-loader的版本为最新8.0.0改成如下即可

  "sass-loader":"^7.3.1"

  然后重新安装项目依赖

  在终端执行npmi

  之后启动项目npmrundev

  项目启动成功,编译报错问题解

  CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

赞(15)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程