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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
深入理解js中this的用法
May 28 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
JS实现数组的增删改查操作示例
Aug 29 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
文件系统基本操作类
2006/11/23 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
angular分页指令操作
2017/01/09 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python操作列表的函数使用代码详解
2017/12/28 Python
django初始化数据库的实例
2018/05/27 Python
pandas通过索引进行排序的示例
2018/11/16 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
J2EE包括哪些技术
2016/11/25 面试题
售后主管岗位职责
2013/12/08 职场文书
综合实践教学反思
2014/01/31 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
英文慰问信
2015/02/14 职场文书
南京大屠杀观后感
2015/06/02 职场文书