web前端：VUE中使用SCSS

作者:彼岸心情 更新于： 2020-03-04 19:44:50

　　随着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使用测试：如下测试修改字体颜色

　　$color:red;

　　div{color:$color;}

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

　　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设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。