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 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery事件对象总结
Oct 17 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 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
世界上第一台立体声收音机
2021/03/01 无线电
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP中的正规表达式(二)
2006/10/09 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python中方法链的使用方法
2016/02/23 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
2014基层党员批评与自我批评范文
2014/09/24 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python