Vue CLI3中使用compass normalize的方法


Posted in Javascript onMay 30, 2019

normalize:统一了基本的样式,如margin: 0;(类似compass中的reset模块)

compass:对sass的封装,扩展

1.安装

npm i normalize.css compass-mixins --save-dev

1.1 normalize.cssx引用

在main.js中

import 'normalize.css'

这样就完成了引用,F12,查看

body {
  margin: 0; // 如果是0则说明normalize已经起作用
}

2.1 compass引用

在vue.config.js中配置

module.exports = {
 css: {
  loaderOptions: {
   sass: {
    // 设置全局引用
    data: `
    @import "./node_modules/compass-mixins/lib/_compass.scss";
    @import "./node_modules/compass-mixins/lib/compass/_layout.scss";
    `
   }
  }
 }
}

这样就可以使用compass提供的模块功能,如

@include border-radius(20px); // css3模块

其它功能:http://compass.aether.ru/

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

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
javascript动态加载二
Aug 22 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
通过实践编写优雅的JavaScript代码
May 30 #Javascript
AngularJs中$cookies简单用法分析
May 30 #Javascript
JS使用new操作符创建对象的方法分析
May 30 #Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 #Javascript
简述pm2常用命令集合及配置文件说明
May 30 #Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 #Javascript
浅谈Vue的响应式原理
May 30 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
对python实现模板生成脚本的方法详解
2019/01/30 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python实现ip代理池功能示例
2019/07/05 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
中国文明网签名寄语
2014/01/18 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
实验教师岗位职责
2014/02/13 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
大班下学期个人总结
2015/02/13 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
晚会开幕词范文
2016/03/04 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技