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中的ajax缓存问题
Dec 19 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
微信小程序实现录音Record功能
May 09 Javascript
五步轻松实现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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python是怎样处理json模块的
2020/07/16 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
小学音乐教学反思
2014/02/05 职场文书
车间主任岗位职责
2014/03/16 职场文书
2014年母亲节寄语
2014/05/07 职场文书
关于保护环境的建议书
2019/06/24 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
德生2P3收音机开箱评测
2022/04/30 无线电