浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法


Posted in Javascript onMarch 13, 2018

vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理。

如果需要使用sass,则安装:

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

如果需要使用less,则安装:

npm install less --save-dev 
npm install less-loader --save-dev

sass的内联写法:

<style lang="sass" scoped> 
 //sass样式 
</style>

less的内联写法:

<style lang="less" scoped> 
 //less样式 
</style>

css的内联写法:

<style lang="css" scoped> 
 //css样式 
</style>

sass的引用写法:

<style lang="sass" src="./index.sass"></style>

less的引用写法:

<style lang="less" src="./index.less"></style>

css的引用写法:

<style lang="css"> 
   @import './index.css' 
</style> 
 或者 
<style lang="css" src="./index.css"></style>

以上就是本人对结合webpack插件extract-text-webpack-plugin单文件组件css编译提取使用的一点心得,欢迎指正,谢谢!

这篇浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
angular select 默认值设置方法
Jun 23 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
vue实现搜索功能
May 28 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
基于vue.js实现的分页
Mar 13 #Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
You might like
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
JS如何生成动态列表
2020/09/22 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python笔记之facade模式
2019/11/20 Python
秘书行业自我鉴定范文
2013/12/30 职场文书
活动策划邀请函
2014/02/06 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
班级安全教育实施方案
2014/02/23 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
入职担保书怎么写
2014/05/12 职场文书
学校个人对照检查材料
2014/08/26 职场文书
房产授权委托书范本
2014/09/22 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
采购员岗位职责范本
2015/04/07 职场文书
应急管理工作总结2015
2015/05/04 职场文书
大学生村官入党自传
2015/06/26 职场文书
写给同事的离职感言
2015/08/04 职场文书
四则混合运算教学反思
2016/02/23 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python