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有關聯的樣式