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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
canvas实现钟表效果
Feb 13 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
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 中include()与require()的对比
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python中你应该知道的一些内置函数
2017/03/31 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
建龙钢铁面试总结
2014/04/15 面试题
饮料业务员岗位职责
2013/12/15 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
大队委员竞选稿
2015/11/20 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书