Vue2.0设置全局样式(less/sass和css)


Posted in Javascript onNovember 18, 2017

为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)

第一步:在src目录下的main.js,也就是入口文件里面添加下面代码

require('!style-loader!css-loader!less-loader!./common/less/index.less')

在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误

require('./common/less/index.less')

第二步:在build目录下的webpack.base.conf.js配置模块,只需要在 rules下面加两个模块即可

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

第三步:若提示报错,可能你没有安装以上依赖,需要你在根目录下的package.json文件中添加依赖

Vue2.0设置全局样式(less/sass和css)

第四步:在命令窗口中执行命令,进行安装依赖

npm install

linux(ubuntu,deepin),Mac os系统可能会提示权限不足需要获取权限那么只需要在前面获取权限即可

sudu npm install

之后如果需要使用less的话,只要在style添加lang属性就好了

<style lang="less"></style>

若公共文件较多 可以整个在一个文件 在通过公共文件链接 实现多个样式文件全局样式

Vue2.0设置全局样式(less/sass和css)

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
jquery 选择器部分整理
Oct 28 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Sea.JS知识总结
May 05 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
JavaScript如何操作css
Oct 24 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
五步轻松实现JavaScript HTML时钟效果
Mar 25 #Javascript
深入研究React中setState源码
Nov 17 #Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 #Javascript
jQuery实现滚动效果
Nov 17 #jQuery
不使用 JS 匿名函数理由
Nov 17 #Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 #Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 #Javascript
You might like
php强制下载类型的实现代码
2011/04/21 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
python解析xml文件操作实例
2014/10/05 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
经典c++面试题四
2015/05/14 面试题
个性大学生自我评价
2013/12/04 职场文书
拓展培训心得体会
2014/01/04 职场文书
关于环保的建议书
2014/05/12 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
《灰雀》教学反思
2016/02/19 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android