浅谈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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
Vue实现穿梭框效果
Sep 30 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中的字符串函数
2006/11/24 PHP
PHP缓冲区用法总结
2016/02/14 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
继承公证书
2014/04/09 职场文书
环保建议书100字
2014/05/14 职场文书
好听的队名和口号
2014/06/09 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
企业法人代表证明书
2015/06/18 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
装修安全责任协议书
2016/03/22 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Python办公自动化解决world文件批量转换
2021/09/15 Python