webpack
静态模块打包工具
它能够把浏览器识别不了的语言(.css,.png),转换成能够识别的
本身只能处理js文件
Gulp/Grunt:优化前端开发流程的
webpack是模块化的解决方案,处理速度更快
安装
node
node -v
npm -v 包管理工具
yarn
淘宝镜像 cnpm
局部安装 npm install --save-dev webpack (在开发过程中需要,打包上线之后不需要的环境/依赖)
全局安装 npm install -g webpack
webpack脚手架
npm install -g webpack-cli
npm install -g webpack webpack-cli
loader 可以把所有类型的文件转换成,webpack可以处理的文件
use 转换时候需要使用的loader
test 转换的是哪一个或者是哪些类型的文件
module:{
rules:[
{
test: /.css$/i,
use:[‘style-loader’,‘css-loader’]
}
]
}
webpack在读取使用的loader的时候,顺序是从右到左的
css文件
css-loader 加载css文件的
npm install --save-dev css-loader
style-loader 让加载之后的css文件起作用
npm install --save-dev style-loader
plugin
插件
对wepack现有的功能进行扩展
BannerPlugin 版权信息
html-webpack-plugin
怎么提高网站的效率(减少网页的加载时间)
优化css:避免冗余,对css进行压缩
优化图片
使用精灵图
减少http请求
https
http
SASS
{
}
sass是css的预处理语言,提高css的使用效率,
在css的基础上,新增了变量,嵌套,混合器,文件导入等特性
sass的特色功能
1.兼容css
2.在css的基础上引入了变量,嵌套等
3.通过函数进行颜色值与属性值的运算
4.提供指令
5.自定义输出格式
sass和less
1.less的环境相对sass要简单,sass依赖于ruby语言,less依赖于javascript
2.less比sass简单
3.功能上sass要比less强大
4.less和sass的处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
5.相对变量的话,less使用的@,sass使用的$
在vue项目中使用sass
新建一个vue项目
Vue init webpack xxx
(npm如果下载报错,那么cnpm)
进入新建的项目
npm install node-sass --save-dev
npm install sass-loader@^7.0.3 –D
(sass-loader一定要指定版本,否则会报错)
npm5之后，npm install xxx 默认带–save/-S下载到dependencies,–save-dev/-D下载到devDependencies
找到build文件夹下的webpack.base.conf.js
在module的rules底下,黏贴下面的代码
{
test: /.scss$/,
loaders: [“style”, “css”, “sass”]
},
到文件中使用scss
1.变量
$myColor:red;
写什么变量名,就引用什么变量名
注意变量值一定要合法,符合css的属性值的要求
当变量定义在css的规则块内,那么我们只能在当前css的代码块中使用这个变量
其他代码块使用会报错
变量是有作用域的
变量值也可以引用其他的变量
$myColor:pink;
$myBorder:5px solid $myColor;
h1{
color: $myColor;
border: $myBorder;
}
在sass中,下划线和中划线是可以相互兼容的
2.嵌套
3.父选择器的标识符
& : 代表上一层父元素,如果在使用伪类元素的时候不加&,那么会解析成该父元素底下的所有后代元素
// .one :hover{} 不加&符
// .one:hover{} 加了&符
.one{
width: 200px;
height: 200px;
border: 1px solid red;
&:hover{
background-color: pink;
}
}
4.组合选择器嵌套
.hello{
>.one{
color: red;
+div{
width: 100px;
height: 100px;
background-color: pink;
}
}
}
5.属性选择器
.one{
width: 100px;
height: 100px;
border:{
style:solid;
width: 5px;
color: red;
}
}
把属性名从中间'-'相连的地方拆分开
sass中文件导入
sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求
导入的方式,可以省略后缀名
@import “xxx”
静默注释
//
不会出现在css文件中的注释
混合器
创建
@mixin 混合器名字{
}
使用
@include 混合器名字;
混合器中不仅可以写属性,还可以写选择器
继承
@extend
.one{
width: 100px;
height: 100px;
border: 5px solid red;
margin: 10px;
}
.two{
@extend .one;
background-color: pink;
}
在上面的代码中,two会继承one的所有样式,包括和one有关联的样式