在vue中使用sass的配置的方法

1、创建一个基于 webpack 模板的新项目

$ vue init webpack myvue

2、在当前目录下，安装依赖

$ cd myvue
$ npm install

3、安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

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

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}

如下图所示：

5、在APP.vue中修改style标签

<style lang="scss">

6、然后运行项目

$ npm run dev

7、修改APP.vue的样式，可以看下效果

8、运行结果背景变成灰色吗，说明你已成功配置好sass

希望能够帮助更多人…( ^__) 嘻嘻……

lily2016n

原创文章 85 获赞 123 访问量 44万+

关注 私信

展开阅读全文

• 点赞 23
• 评论 8
• 分享

  x

  海报分享

  扫一扫，分享海报

收起全文

添加代码片

• HTML/XML
• objective-c
• Ruby
• PHP
• C
• C++
• JavaScript
• Python
• Java
• CSS
• SQL
• 其它

还能输入1000个字符

zhouzuoluo的博客

07-12 5万+

首先要了解什么是CSS预处理器？SCSS是一种CSS预处理语言  定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让cs...

liuxing393724034的博客

10-31 8067

脚手架安装vue项目npminstall-gvue-cli安装项目依赖npminstall运行项目npmrundev安装sass依赖npminstall--save-devsass-loader//s...

李大人的博客

02-21 5957

Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中...

小羽向前跑

05-30 2155

先安装npminstallnode-sass--save-devnpminstallnode-sass--save-devnpminstallstyle-loader--save-dev如果npm安装...

fy0004 blog

11-23 4537

sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。Sass拥有比其他任何CSS扩展语言更多的功能...

jiangwei1994的博客

08-22 2857

1.安装sass依赖包在终端中输入npm install --save-dev sass-loader，下图表示安装成功：安装完sass-loader后，再安装node-sass，输入npm inst...

qq_33871178的博客

02-01 1249

1.安装在vue项目中使用scss，一个重要的概念就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署...

u011777748的博客

06-25 292

使用vue-cli搭建项目有内置的webpack方案，但是没有使用scss。vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默认只支持sass,要是想要使用...

温柔养猫客

10-24 1471

vue 配置 scss（局部）1.安装依赖，输入命令 ： npm install sass-loader node-sass vue-style-loader --save-dev2.找到/build...

0117

08-10 1267

文章目录一、项目介绍1.项目简介2.涉及功能及技术3.SaaS概述4.需求分析5.系统设计5.1开发方式5.2 技术架构6.开发环境二、项目初步设计一、项目介绍1.项目简介此系列博客将会介绍从0开始，...

weixin_33757609的博客

03-25 361

一般情况下：npm install node-sass --save-dev //安装node-sassnpm install sass-loader --save-dev //安装sass-lo...

前端挖掘机

08-29 622

1.sass编译环境依赖于ruby  先下载ruby  本次下载的是 rubyinstaller-2.3.1-x64版本 安装2.将sass文件下载到本地      cmd  命令： get inst...

weixin_41946419的博客

09-03 1454

写这个博客是因为自己在使用npm安装node-sass包的时候遇到了几个错误，花了不少时间解决的，特此记录一下，也给大家一点点思考的方向。错误一： 下载不了node-sass或者下载缓慢： ...

时间飞逝的博客

10-13 7574

Vue安装sass的命令：1、npminstallnode-sass--save-dev2、npminstallsass-loader--save-dev在进行第一步的时候，我们会发现用报了下面这个的...

qq_41797053的博客

09-06 3629

我们这里用两个部分来说明吧。1.如何学习Scss2.如何使用Scss1.如何学习Scss学习Scss的第一步不是你要知道什么是Scss的概念啊什么的，而是找到一个合适的...

weixin_43735788的博客

04-23 366

1、首先安装sass依赖npm install sass-loader --save-devnpm install node-sass --save-dev或使用cnpm2、在build文件夹下的we...

weixin_44251396的博客

07-26 176

vue中scss的用法1.在src文件夹里面新建assets文件夹2.在asstes文件夹里面新建css文件夹3.在css文件夹里面新建mixin.scss和reset.scss,如下图4.在app....

qq_23018459的博客

06-21 212

1、使用save会在package.json中自动添加。npm install node-sass --save-devnpm install sass-loader --save-dev注：通常使用...

S筱潇S四维Smile

05-10 207

1.安装sass的依赖包：npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-...

kairrys

06-19 524

咱们闲话少说，直接上干货了~PS. 语法格式 (Syntax) .sass和.scss的区别Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 ...

duansamve的博客

04-20 512

一、安装对应依赖node模块：npm install node-sass --save-devnpm install sass-loader --save-dev二、打开webpack.base.co...

m0_37605642的博客

06-20 1928

一、安装npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loade...

sunlizhen的专栏

11-28 43

1. 安装vue项目2.安装依赖 npm install3.运行项目 npm run dev4.安装sass依赖npm install --save-dev sass-loader/ /sass-lo...

lihefei_coder的博客

03-12 972

大山博客

06-30 879

第一、在安装完vue的框架后，在对应终端中输入代码npm install node-sass –save-dev npm install sass-loader –save-dev 有的是位置调换 都...

码农的专栏

03-15 35

引入loadernpm install node-sass --save-devnpm install sass-loader --save-devnpm install style-loader -...

asm35548的博客

08-16 34

npm install --save-dev sass-loader style-loader css-loadernpm install --save-dev extract-text-webpac...

光

06-21 3449

背景：sass的mixin与全局变量文件需在多处引入十分麻烦，可以通过sass-resources-loader达到全局注入，终身受益的目的。scss目录安装npm i sass-resource...

weixin_42947716的博客

04-14 15

Sass的使用最近在做vue脚手架搭建项目，下一步希望实现响应式布局，查找的资料说要实现vue的响应式布局，就要用到sass。然后决定一步步来，先学习使用sass。下载Ruby安装sass之前必须先安...

weixin_40151813的博客

01-20 43

1、开始在vue项目中使用sass,在命令行输入一下命令进行安装（使用git命令行要用shift+insert 进行粘贴否则粘贴不上）cnpm install node-sass --save-dev...

weixin_44744795的博客

02-09 38

sass问题2010 在家办公 家中电脑因为刚重装了系统 很多环境依赖要重新安装 装好了 nodejs 和git后成功把项目拉下来 然后 npm i 的时候出现问题了 结果就是在npm...

qq_36453017的博客

10-02 882

使用node6.3.0版本可以直接cnpm install安装使用node-sass依赖，网上查的好像node7以下版本不会报错，所以安装了6.3.0的稳定版本因为我用的是nvm 所以特别方便。。。 ...

小圣贤君的博客

11-17 1446

我们在编译sass文件之前需要先安装sass插件，在命令行里输入：cnpm install gulp-sass –save-dev 安装完成后就可以编译sass文件，如果抛出new Error(err...

baita12138的博客

09-03 32

转载于:https://www.cnblogs.com/TRMan/p/11454415.html

早安丸子的专栏

04-03 41

安装sassnpm install node-sass sass-loader -save-dev在webpack中添加loader设置在build文件夹webpack.base.conf.js中 m...

XinYe666666的博客

04-29 29

第一步：安装依赖npm install node-sass --save-devnpm install sass-loader --save-devnpm install style-loader -...

菜鸟的博客

06-14 279

1.在vue-cli3.0中引入sass1.1通过npm下载sassnpm install sass-loader --save-devnpm install node-sass --sava-de...

weixin_38411737的博客

04-11 20

安装 npm install --save-dev sass-loader npm install --save-dev node-sass@7.3.1

家有佳欣宝贝的博客

11-16 47

首先是安装依赖npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass但是...

CSDN学院

09-24 1万+

感觉全世界营销文都在推Python，但是找不到工作的话，又有哪个机构会站出来给我推荐工作？笔者冷静分析多方数据，想跟大家说：关于超越老牌霸主Java，过去几年间Python一直都被寄予厚望。但是事实是...

启舰

04-14 42万+

今年，我也32了 ，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。目录：你以为的人生 一次又一次的伤害 猎头界的真...

敖丙

02-13 24万+

我问了身边10个大佬，总结了他们的学习方法，原来成功都是有迹可循的。

沉默王二

02-25 34万+

每天都会收到很多读者的私信，问我：“二哥，有什么推荐的学习网站吗？最近很浮躁，手头的一些网站都看烦了，想看看二哥这里有什么新鲜货。”今天一早做了个恶梦，梦到被老板辞退了。虽然说在我们公司，只有我辞退老...

Java成神之路

01-21 23万+

何来我，一个双非本科弟弟，有幸在 19 届的秋招中得到前东家华为（以下简称 hw）的赏识，当时秋招签订就业协议，说是入了某 java bg，之后一系列组织架构调整原因等等让人无法理解的神操作，最终毕业...

HollisChuang's Blog

02-11 9万+

我有个学弟，在一家小型互联网公司做Java后端开发，最近他们公司新来了一个技术总监，这位技术总监对技术细节很看重，一来公司之后就推出了很多"政策"，比如定义了很多开发规范、日志规范、甚至是要求大家统一...

敖丙

02-14 4万+

亲测全部都很好用，自己开发都离不开的软件，如果你是学生可以看看，提前熟悉起来。...

沉默王二

02-15 15万+

我是一名程序员，从正值青春年华的 24 岁回到三线城市洛阳工作，至今已经 6 年有余。一不小心又暴露了自己的实际年龄，但老读者都知道，我驻颜有术，上次去看房子，业务员肯定地说：“小哥肯定比我小，我今年...

沉默王二

02-16 7万+

推荐 10 款我自己珍藏的 Chrome 浏览器插件

程序猿学社的博客

02-17 4608

本文我们来看看多线程的应用场景，为什么要用多线程，以及实现一个多线程有几种方式。...

dotNet全栈开发

02-19 6万+

今天下午在朋友圈看到很多人都在发github的羊毛，一时没明白是怎么回事。后来上百度搜索了一下，原来真有这回事，毕竟资源主义的羊毛不少啊，1000刀刷爆了朋友圈！不知道你们的朋友圈有没有看到类似的消息...

Leo的博客

02-21 6万+

从来没讲过运维，因为我觉得运维这种东西不需要太多的知识面，然后我一个做了运维朋友告诉我大错特错，他就是从3K的运维一步步到40K的，甚至笑着说：我现在感觉自己什么都能做。既然讲，就讲最重要的吧。监控是...

CSDN学院

02-26 5万+

Python真的万能语言？在我的一个朋友看来，他坚信 Python 可以做任何事情。其实我是不服的，因为我在某网站看到有条评论：Python将要黄了！事实究竟如何？这篇文章会揭开这个黑幕，让程序员看清...

CSDN学院

02-27 1273

最近在某瓜视频上，一条“程序员面试vlog”的短视频火了。在青岛这样的二线城市，能数得出来的大厂，大概就是海尔、海信、奥克斯了。而他去面试的，就是海信。说来也传奇，他原来所在的公司，整个部门被裁掉。而...

CSDN学院

02-27 1654

中国AI专利，已经位于世界前列，且正在蓬勃发展。最新参考，是12月2日出炉的《人工智能技术专利深度分析报告》。报告中的两点小结论： 截至2019年10月，中国人工智能专利申请量已经超越美国，成为AI领...

CSDN学院

02-27 869

人红是非多，最近Python就遇到了这样的问题。与国际技术社区上一片「形势大好」对比鲜明的是，国内技术圈却一直存在对Python，「力挺」和「吃瓜」两派阵营，针锋相对，最近就悄然上线一个争议性疑问：围...

CSDN学院

02-27 2008

特斯拉创始人马斯克，在2019年曾许下很多承诺，其中一个就是：2019年底实现完全的自动驾驶。虽然这个承诺又成了flag，但是不妨碍他今年继续为这个承诺努力。这不，就在上周一，马斯克之间在twitte...

CSDN学院

02-27 1224

针对新型冠状病毒的确诊，全国大多数医院基本都采用核酸检测。果壳网发文称：从病人样本送到实验室即刻开始测试，到出检测报告，差不多需要8个小时。但是8个小时太长，在现在这种病毒传播速度下，让人焦急万分。但...

龙跃十二

02-27 5万+

数据结构与算法思维导图

沉默王二

03-01 8万+

昨天早上通过远程的方式 review 了两名新来同事的代码，大部分代码都写得很漂亮，严谨的同时注释也很到位，这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时，还是忍不住破口大骂：“...

ThinkWon的博客

03-01 8万+

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别？什么是 Linux 内核？Linux的基本组件是什么？Linux 的体系结构BASH和DOS之间的基本区别是什么？Linux 开...

纯洁的微笑

03-04 8万+

互联网公司工作，很难避免不和黑客们打交道，我呆过的两家互联网公司，几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口，有的是寻找线上服务器可能存在的漏洞，大部分都......

shenjian58的博客

03-08 4万+

昨天看到一档综艺节目，讨论了两个话题：（1）中国学生的数学成绩，平均下来看，会比国外好？为什么？（2）男生的数学成绩，平均下来看，会比女生好？为什么？同时，我又联想到了一个技术圈经常讨......

universsky2015的博客

03-08 1万+

蒋凡是何许人也？2017年12月27日，在入职4年时间里，蒋凡开挂般坐上了淘宝总裁位置。为此，时任阿里CEO张勇在任命书中力赞：蒋凡加入阿里，始终保持创业者的冲劲，有敏锐的......

爪白白的个人博客

04-25 2万+

原博客再更新，可能就没了，之后将持续更新本篇博客。

CSDN学院

03-10 9349

年后复工大戏，又增加一出：删库跑路！此举直接给公司带来数10亿的市值蒸发损失，并引发一段“狗血恩怨剧情”，说实话电视剧都不敢这么拍！这次不是别人，正是微信生态的第三方服务商微盟，在这个"远程办公”的节...

九章算法的博客

03-10 7万+

提到“程序员”，多数人脑海里首先想到的大约是：为人木讷、薪水超高、工作枯燥……然而，当离开工作岗位，撕去层层标签，脱下“程序员”这身外套，有的人生动又有趣，马上展现出了完全不同的A/B面人生！不论是简...

ThinkWon的博客

03-10 12万+

文章目录数据库基础知识为什么要使用数据库什么是SQL？什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式？分别有什么区别？数据类型mysql...

CSDN学院

03-11 1万+

2019年Pyhon可谓是越来越火，而且屡次超越Java、C++荣登成为编程语言排行榜第一的语言，国内的公司和程序员为什么都越来越喜欢使用Python呢？近日，一份上海幼升小孩子的简历，吸引了不少关注...

shenjian58的博客

03-12 5万+

有个好朋友ZS，是技术总监，昨天问我：“有一个老下属，跟了我很多年，做事勤勤恳恳，主动性也很好。但随着公司的发展，他的进步速度，跟不上团队的步伐了，有点......

沉默王二

03-13 7万+

私下里，有不少读者问我：“二哥，如何才能写出一份专业的技术简历呢？我总感觉自己写的简历太烂了，所以投了无数份，都石沉大海了。”说实话，我自己好多年没有写过简历了，但我认识的一个同行，他在阿里，给我说了...

安琪拉的博客

03-15 6万+

一个HashMap能跟面试官扯上半个小时关注 安琪拉的博客 1.回复面试领取面试资料 2.回复书籍领取技术电子书 3.回复交流领取技术电子书前言HashMap应该算是Java后端工程师面试的必问...

3y

03-16 7万+

不说了，字节跳动也反手把我挂了。

CSDN学院

03-18 3396

最近关于AI有两个消息，一个好的，一个坏的。先说好消息。德勤发布《全球人工智能发展白皮书》，预计到2025年，世界人工智能市场规模将超过6万亿美元！2017年至2025年复合增长率达30%。毫无疑问，...

江南一点雨的专栏

03-19 4万+

有小伙伴问松哥这个问题，他在上海某公司，在离职了几个月后，前公司的领导联系到他，希望他能够返聘回去，他很纠结要不要回去？俗话说好马不吃回头草，但是这个小伙伴既然感到纠结了，我觉得至少说明了两个问题：1...

不脱发的程序猿

03-19 1万+

阿里巴巴全球数学竞赛（ Alibaba Global Mathematics Competition）由马云发起，由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛，全世界爱...

廖志伟的博客（Java）

05-08 1万+

HashMap底层实现原理，红黑树，B+树，B树的结构原理 Spring的AOP和IOC是什么？它们常见的使用场景有哪些？Spring事务，事务的属性，传播行为，数据库隔离级别 Spring和Spri...

路人甲Java

03-25 3万+

面试阿里p7被问到的问题(当时我只知道第一个)：@Conditional是做什么的?@Conditional多个条件是什么逻辑关系？条件判断在什么时候执......

Zhangguohao666的博客

03-30 1万+

爬取彼岸桌面网站较为简单，用到了requests、lxml、Beautiful Soup4

CSDN资讯

03-27 1万+

编程语言层出不穷，从最初的机器语言到如今2500种以上的高级语言，程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新，一边面临由于许多代码已存在，程序员编写新应用程序时存在重复“搬砖”的现象...

Java C语言 Python C++ C# Visual Basic .NET JavaScript PHP SQL Go语言 R语言 Assembly language Swift Ruby MATLAB PL/SQL Perl Visual Basic Objective-C Delphi/Object Pascal Unity3D

没有更多推荐了，返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

目录

分类专栏

• vue学习 14篇
• vue学习 15篇
• 微信小程序 11篇
• 学习 7篇
• 前端 12篇
• vue 16篇
• git 5篇
• gulp 1篇
• js 30篇
• jq 1篇
• ajax 3篇
• bootstrap 1篇
• sass 2篇
• css3 12篇
• html 2篇
• 微信小程序 11篇
• mui框架 2篇
• Echarts 2篇
• js高级程序设计（第三版）总结 9篇
• ES6 3篇
• node 1篇
• react 2篇

应支付0元

点击重新获取

扫码支付

支付成功即可阅读