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 相关文章推荐
jQuery判断元素是否存在的可靠方法
May 06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
JS返回顶部实例代码
Aug 09 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
Vue OpenLayer测距功能的实现
Apr 20 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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
django序列化serializers过程解析
2019/12/14 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
简单的Python人脸识别系统
2020/07/14 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
个人买房协议书范本
2014/10/06 职场文书
旷课检讨书
2015/01/26 职场文书
农村党员干部承诺书
2015/05/04 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
python非标准时间的转换
2021/07/25 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python