浅谈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 08 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
五段实用的js高级技巧
Dec 20 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
简单快速的实现js计算器功能
2017/08/17 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
煤矿班组长的职责
2013/12/25 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python