vue中使用scss

xjguan 2019-09-17 原文

第一步

安装scss依赖,cnpm i node-sass sass-loader -D

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

第二步:

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

{

test: /\.scss$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
 
第三步:

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

 <style lang=”scss”>

$color:red;
div {color:$color;}
</style>
 

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

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

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

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

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

 

“sass-loader”: “^7.3.1”

 

然后重新安装项目依赖

在终端执行 npm i

之后启动项目 npm run dev

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

 
发表于
2019-09-17 12:03 彼岸心情 阅读() 评论() 编辑 收藏

 

版权声明:本文为xjguan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xjguan/p/11532824.html

vue中使用scss的更多相关文章

随机推荐

  1. 【Excel】如何将第二列的数据与第一列的匹配并将其数据放到与第一列对应的行(VLOOKUP)

    该函数的语法规则如下: VLOOKUP(lookup_value,table_array,col_index_ […]...

  2. Ubuntu 18.04 将gcc版本降级为5.5版本

    Remark: Polynomial algebra 程序由于版本问题只能在gcc 5.0 版本运行, 而ub […]...

  3. 自制超声波驱狗器(第一版)

    一种简单的制作超声波驱狗器的方法 文档标识符:Ultrasonic_Dog_Repellent_T-D-P2 […]...

  4. 一起玩转微服务(14)——单元测试

    作为一名java开发者,相信你或多或少的接触过单元测试,对于测试来讲它是一门能够区分专业开发人员与业余开发人员 […]...

  5. jquery.toast提示框案例

    JQuery信息提示框插件 jquery.toast.js 的使用<link href="h...

  6. 【Python爬虫】花瓣网爬取美女图片

    代码1 #/usr/bin/env python #coding:utf-8 import json impo […]...

  7. 视频加字幕

        import os os_sep = os.sep this_file_abspath = os.pa […]...

  8. 嵌入式开发—C语言面试题

    嵌入式开发—C语言面试题 源地址:http://blog.csdn.net/xdx2ct1314/articl […]...