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


Posted in Javascript onMarch 20, 2018

  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', 'scss']
}

如下图所示:

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

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

<style lang="scss">

6、然后运行项目

$ npm run dev

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

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

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

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

总结

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

Javascript 相关文章推荐
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 #Javascript
动态加载、移除js/css文件的示例代码
Mar 20 #Javascript
webpack 打包压缩js和css的方法示例
Mar 20 #Javascript
浅谈Node 调试工具入门教程
Mar 20 #Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 #Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
关于vue面试题汇总
Mar 20 #Javascript
You might like
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
vue .sync修饰符的使用详解
2018/06/15 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python实现定时任务
2017/02/08 Python
Apache如何部署django项目
2017/05/21 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
动态密码技术
2012/10/18 面试题
土建资料员岗位职责
2014/01/04 职场文书
招聘专员岗位职责
2014/03/07 职场文书
保密协议书范本
2014/04/22 职场文书
高三学生评语大全
2014/04/25 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2014年采购工作总结
2014/11/20 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
河童之夏观后感
2015/06/11 职场文书
公司员工离职感言
2015/08/03 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书