vue cli webpack中使用sass的方法


Posted in Javascript onFebruary 24, 2018

1:安装依赖

npm install sass-loader node-sass --save-dev

2:html中 修改style

<style lang="sass">
 /* write sass here */
</style>

3: 使用正常sass 语法

//但是会报错
<style lang="sass">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // 解决方案一 记得属相前面一定是两个空格
<style lang="sass">
 $highlight-color: #F90
 $highlight-border: 1px solid $highlight-color
 .selected 
  border: $highlight-border
</style>
// 解决方案二 sass 修改为 scss
<style lang="scss">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
  border: $highlight-border
 }
</style>
// 官方解决方案 你需要配置 vue-loader 的选项
{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
  scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
 }
 }
}

链接:  https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

4:引用sass/scss 文件

@import "./common/scss/mixin";

总结

以上所述是小编给大家介绍的vue cli webpack中使用sass的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
vue-cli常用设置总结
Feb 24 #Javascript
JS处理一些简单计算题
Feb 24 #Javascript
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
通过js动态创建标签,并设置属性方法
Feb 24 #Javascript
JS随机数产生代码分享
Feb 24 #Javascript
JS中常用的消息框总结
Feb 24 #Javascript
You might like
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Javascript typeof 用法
2008/12/28 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
在python里从协程返回一个值的示例
2019/02/19 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
民间个人借款协议书
2014/09/30 职场文书
个人委托书范本汇总
2014/10/01 职场文书
办理收楼委托书范本
2014/10/09 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers