在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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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 XML操作类DOMDocument
2009/12/16 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python实现二分法算法实例
2015/02/02 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python程序慢的重要原因
2020/09/04 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
简短大学毕业感言
2014/01/18 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
争做文明公民倡议书
2014/08/29 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android