vue項目中使用scss詳細方法步驟
一、安裝使用scss
1. 安裝 scss
npm install scss --save
2. 安裝 node-sass 和 sass-loader
sass-loader：把 sass編譯成css
sass-loader：nodejs環(huán)境中將sass轉(zhuǎn)css
提示：限制 node-sass，sass-loader 版本號，防止默認安裝的版本號過高
npm i sass-loader@7.3.1 -D npm i node-sass@4.14.1 -D
版本對應(yīng)關(guān)系：
3. 配置 webpack.base.conf.js 文件
提示：在 build 文件夾目錄下 webpack.base.conf.js 文件中，找到 rules 添加以下代碼
rules: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
]
4. 組件中使用 scss
提示：在組件中style標(biāo)簽上添加屬性 lang="scss"，保存運行。
<style lang="scss">
#app {
background: $color;
}
</style>
二、設(shè)置scss變量
1. 使用 sass-resources-loader 實現(xiàn)全局變量
安裝 sass-resources-loader
cnpm install sass-resources-loader --save
2. 新建一個 public.scss 文件
在src目錄下的assets文件夾里面新建一個public.scss文件，用于存放所有的公共變量。
3. 根目錄下找到 build 下的 utils.js 文件
提示：resources里寫 scss（公共變量文件） 路徑
scss: generateLoaders('sass')
// 改為：
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/public.scss') // 指定單個文件
// resources: [path.resolve(__dirname, '../src/assets/public.scss'),path.resolve(__dirname, '../src/assets/public.scss')] // 指定多個文件
// 將匹配文件夾和子目錄中的所有文件或路徑數(shù)組
// resources: path.resolve(__dirname, '../src/assets/scss/**/*.scss') // 指定單個文件夾和子目錄中的所有文件
// resources: [path.resolve(__dirname, '../src/assets/scss/**/*.scss'),path.resolve(__dirname, '../src/assets/scss/**/*.scss')] // 指定多個文件夾和子目錄中的所有文件
}
}),
4. 運行項目
重新npm run dev ,組件中就可以使用全局變量了。
三、常用全局變量
1. 設(shè)置變量
在全局變量文件里面寫入變量（$），混合（@mixin，括號里面為默認值，可有可無），繼承（%）等語法。
// 變量
$color: #ff0;
$bac_color: #222;
$bac-color: #111;
.main {
color: $color;
background: $bac_color; /*$bac_color被$bac-color覆蓋*/
}
// 混合
@mixin borderRadius($num: 8px) {
color: $color;
border-radius: $num;
}
// 繼承
%cricle {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
}
2. 使用變量
在組建中使用變量（$+變量名），混合（@include），繼承（@extend）。
.div{
// 變量
background: $color;
// 混合
@include borderRadius(20px); /*()不傳值用默認值8px*/
// 繼承
@extend %cricle;
}
四、使用全局變量
1. 變量
1、變量以 $ 開頭，用來存儲一些在css中需要復(fù)用的參數(shù)；
2、變量存在作用域，內(nèi)部聲明的變量無法在外面使用，外部如需引用內(nèi)部的變量，可在變量值的后面添加!global聲明;
3、變量名中，中劃線等同下劃線，值會被第二次定義的變量覆蓋。
scss代碼
$color = #333;
$bac_color = #222;
$bac-color = #111;
.main {
color: $color;
background: $bac_color; /*$bac_color被$bac-color覆蓋*/
}
/*編譯后：*/
.main{
color : #333;
background: #111;
}
2. 嵌套
nav {
ul {list-style: none;}
li { display: inline-block; }
}
/*編譯后：*/
nav ul{list-style: none;}
nav li{display: inline-block;}
3. 引入
1、scss通過 @import 可以把多個文件結(jié)合到一起；
2、以 _開頭命名的文件不會直接生成為CSS文件，只在使用@import指令的位置被導(dǎo)入；
3、可全局引入或局部引入；
4、scss中引入片段時，可以缺省文件擴展名；
4、css原生的@import會通過額外的HTTP請求獲取引入的樣式片段，而scss的@import則會直接將這些引入的片段合并至當(dāng)前CSS文件，并且不會產(chǎn)生新的HTTP請求。
/*_one.scss*/
nav {
ul {list-style: none;}
li { display: inline-block; }
}
/*two.scss*/
@import '_one' /*全局導(dǎo)入，缺省后綴*/
.main{
@import '_one'/*局部導(dǎo)入*/
color : #333;
background: #111;
}
4. 混合
1、通過 @mixin 定義一個類或方法，在其它位置通過 @include 引用這個類或方法
2、@mixin 如果沒有調(diào)用，不會被渲染
3、多個參數(shù)時，傳參指定參數(shù)的名字，可以不用考慮傳入的順序
@mixin border-radius($radius：5px) { /*設(shè)置默認值為5px*/
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(); /*未傳參數(shù)，默認值為5px*/
}
.box1 {
@include border-radius(10px); /*傳入?yún)?shù)，值為10px*/
}
/*編譯后：*/
.box {
border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.box1 {
border-radius: 10px;
-ms-border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
}
5. 繼承
1、使用%定義一個被繼承的樣式，它本身不起作用，只用于被其他人繼承
2、樣式如果沒有被繼承，不會輸出到最終生成的CSS文件
3、注意，不能繼承 @extend .box .main 這種連續(xù)組合的類，應(yīng)該寫為
@extend .box, .main
%err-color {
color:red;
}
.errBox{
@extend %err-color;
padding: 10px;
}
.errBox2{
@extend %err-color;
padding: 5px;
}
/*編譯后：*/
.errBox, .errBox2{
color:red;
}
.errBox{
padding: 10px;
}
.errBox2{
padding: 5px;
}
6. if / else / each / for
1、@if 和 @else
@if 條件為真 {
//code
} @else {
//code
}
2、 @each
遍歷變量所存在的所有數(shù)據(jù)。
@each $color in red, green, yellow, blue {
.p_#{$color} { /*插值，第七點會講到*/
background-color: #{$color};
}
}
/*編譯后：*/
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }
3、@for循環(huán)
(1) 關(guān)鍵字 through 表示包括終點值這個數(shù)，
(2) 關(guān)鍵字 to 不包括終點值這個數(shù)。
@for $i from 1 through 3 { /*through 包括3這個終點值*/
.item-#{$i} {
width: 2px * $i;
}
}
/*編譯后：*/
.item-1 {
width: 2px;
}
.item-2 {
width: 4xp;
}
.item-3 {
width: 6px;
}
7. 其他
1、插值
一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性名稱或在某些特殊情況下則必須要以 #{$XXX} 形式使用。
如下，變量作為屬性名的情況使用插值的形式使用
@each $color in red, green, yellow, blue {
.p_#{$color} { /*插值，第七點會講到*/
background-color: #{$color};
}
}
2、注釋
(1) 使用//注釋的內(nèi)容編譯后不存在
(2) 使用/* */注釋的內(nèi)容編譯后會存在css文件中
總結(jié)
到此這篇關(guān)于vue項目中使用scss的文章就介紹到這了,更多相關(guān)vue使用scss內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法
這篇文章主要介紹了vue進入頁面時不在頂部，檢測滾動返回頂部按鈕問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動（仿淘寶京東收貨地址4級聯(lián)動），非常具有實用價值，需要的朋友可以參考下2017-10-10
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果的實現(xiàn)代碼，文章包括難點說明，介紹的非常詳細，感興趣的朋友參考下2017-01-01
這篇文章主要介紹了vue-cli2.9.3 詳細教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
element-ui中的clickoutside點擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Vue項目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項目的打包是一個非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹的是vue 如何實現(xiàn)表單校驗的方法，又代碼詳細解說，感興趣的小伙伴可以參考下面文章的具體內(nèi)容2021-09-09