浅谈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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 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
destoon常用的安全设置概述
2014/06/21 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
python私有属性和方法实例分析
2015/01/15 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
.net开发工程师面试题
2014/02/25 面试题
2014年清明节寄语
2014/04/03 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
个人先进事迹材料
2014/12/29 职场文书
项目备案申请报告
2015/05/15 职场文书
清洁工工作总结
2015/08/11 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android