vue2.0中使用sass
第一部分:Sass語言
Sass是一種強大的css擴展語言(css本身並不是一門語言),它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言(如Java、C#、Ruby等)有的一些特性,並且完全兼容CSS語法。Sass有助於保持大型樣式表結構良好。
Sass有兩種語法。
一種稱為SCSS,是一個CSS3語法的擴充版本,也就是說,所有符合CSS3語法的樣式表也都是具有相同語法意義的SCSS文件,SCSS樣式表文件要以.scss擴展名結尾。在vue中,我們可以使用<style lang="scss"></style>來標誌裏面的內容是以SCSS語法來書寫的。
一種稱為SASS,是Sass以前的語法,它和python一樣,沒有{}大括號來標誌程序塊,而是以縮進來標誌嵌套層級;而且也不使用分號,而是用換行符來分隔屬性。SASS樣式表文件要以.sass擴展名結尾。在vue中,我們可以使用<style lang="sass"></style>來標誌裏面的內容是以SASS語法來書寫的。
第二部分、VUE2.0中集成Sass
Step1:在項目中安裝Sass
1 npm install node-sass --save-dev 2 npm install sass-loader --save-dev
PS:有時因為網絡原因,安裝起來比較慢,這裏推薦的和大家的一樣,使用淘寶的,可以臨時用一下淘寶的鏡像,不用非得將默認的鏡像源更新為淘寶的。如下所示:
1 $ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
說明:
--registry=https://registry.npm.taobao.org 淘寶npm包鏡像
--disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像,一些二進制包編譯時用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個才是node-sass鏡像
Step2:配置Sass解析器
在webpack.base.conf.js中,modules結節下的loaders結節中添加es2015的支持,如下所示:
1 module: {
2 loaders: [
3 {
4 test: /\.js$/,
5 exclude: /(node_modules|bower_components)/,
6 loader: ‘babel‘,
7 query: {
8 presets: [‘es2015‘]
9 }
10 }
11 ],
12 }
PS:不安裝的話會出現如下錯誤:Couldn‘t find preset "es2015" relative to directory
同樣是在webpack.base.conf.js中,modules結節下的rules節點中添加sass的解析器,如下所示:
1 module: {
2 rules: [
3 {
4 test: /\.scss$/,
5 loaders: ["style", "css", "sass"]
6 },
Step3:嘗試使用Sass的SASS語法
以下是使用傳統的CSS樣式的頁面:
樣式如下:
1 <style>
2 .body {
3 color:red;
4 }
5 </style>
我們修改樣式為:
1 <style lang="sass">
2 $body-color: red;
3
4 .body
5 color: $body-color;
6 </style>
樣式依然生效。
Step4:嘗試使用Sass的SCSS語法
1 <style lang="scss">
2 $body-color:red;
3 .body {
4 color: $body-color;
5 }
6 </style>
樣式依然生效。
說明:這個只是最簡單的例子,而且是與vue結合,如果你需要單獨編譯.sass文件或者.scss文件,那麽你需要安裝Ruby, 同時可以讓SASS監控某個樣式表的變動,實現樣式的熱部署。
參考文檔
http://www.ruanyifeng.com/blog/2012/06/sass.html
https://www.w3cplus.com/sassguide/
http://www.jianshu.com/p/67f52071657d
https://www.cnblogs.com/walls/p/6258974.html
http://www.jianshu.com/p/8e60048baeb7
https://www.cnblogs.com/qqqiangqiang/p/5359986.html
http://sass.bootcss.com/
https://www.cnblogs.com/crazycode2/p/6535105.html
https://zhuanlan.zhihu.com/p/25106145
vue2.0中使用sass