第一章：Vue中實踐樣式文件復用（模塊化導入）

說明： 通常項目中復用的樣式值（變量）和樣式段（mixin）會統一放在一個.scss文件中（common.scss）供項目使用，主要來學習common.scss文件的使用

組件中使用
在組件的scss文件中直接導入，屬于誰用誰引：

@import '../assets/style/common.scss'

全局中使用
秉著懶的原則，對于這些高度復用的東西，能一次搞定自然是最好的：

// 在main.js中引入全局樣式 import './assets/style/common.scss'

然后在組件中去引用，成功的報錯了！！！（這種注冊方式適用于普通樣式）

解決方案：
不用再main.js中引入了 ，直接利用vue.config.js來配置
報錯解決方案一：創建 vue.config.js 文件，寫入如下代碼：

module.exports = {css: {loaderOptions: {// 給 sass-loader 傳遞選項sass: {// @/ 是 src/ 的別名prependData: `@import '~@/assets/style/common.scss';` //新版本}},} }

采用第1種方法的時候要注意因為它會在所有 sass 文件里添加相同的代碼。如果添加的不是變量, mixin 之類的，而是類似下面的代碼的話。假設你有20個scss文件的話，下面這段代碼就會出現在你最終打包出來的文件20次。
參考：https://blog.csdn.net/weixin_41615439/article/details/104216159

大概的意思是項目自己幫你在每個scss文件中添加你的common.scss代碼，建議你只寫一些共用的變量和mixin，不要包含普通的樣式，不然會在編譯后的文件中重復出現。

只有變量的

既有變量，還有普通樣式的

可以看見div重復了兩次，這種普通樣式要全局通用公有，應該單獨寫在一個 default.scss 文件中，然后全局引入，下圖的 div 樣式就不會重復了

// main.js 中全局注冊默認公用樣式 import './assets/style/default.scss'

結論：定義變量和mixin的 scss 單獨放在一個文件夾，在vue.config.js中設置后，可全局使用變量和mixin

報錯解決方案二：

利用 sass-resources-loader 插件，

npm i sass-resources-loader -D

創建 vue.config.js 文件，寫入如下代碼：

module.exports = {chainWebpack: config => {const oneOfsMap = config.module.rule('scss').oneOfs.storeoneOfsMap.forEach(item => {item.use('sass-resources-loader').loader('sass-resources-loader').options({// Provide path to the file with resourcesresources: 'src/assets/style/common.scss',//文件的路徑// Or array of paths// resources: ['./path/to/vars.scss', './path/to/mixins.scss']}).end()})} }

與第一種不同，它是將文件中變量和mixin注冊到了全局（注意依舊不要寫普通樣式）

第二章：變量定義和使用

/* $變量名：值 */ $themeColor: red;/* 使用 */ div{background-color: $themeColor; }

第三章：@mixin混入和@include引入混入

樣式代碼段的復用，將復用的代碼段定義后引入使用：

@mixin name { property: value; property: value; … }

/* 定義混入 */ @mixin my-flex-center{display: flex;justify-content: center;align-items: center; }/* 使用混入 */ div{@include my-flex-center;background-color: red; }/* 編譯后 */ div{display: flex;justify-content: center;align-items: center;background-color: red; }

混入可以接收參數：

@mixin bordered($width, $color){border:$width solid $color; }div{@include bordered(1px, red); }/* 編譯后 */ div{border: 1px solid red; }

指定默認值：可以都指定，也可以指定其中的幾個

@mixin bordered($width: 1px, $color: red){border:$width solid $color; }div{@include bordered(,red); /* 錯誤的，如果你只想傳某些個參數應該指定它，其他的會默認 */@include bordered（$color: green） /* 此時$width會取默認值1px*/ }

可變參數（類似arguments）

有時，不能確定一個混入（mixin）或者一個函數（function）使用多少個參數，這時我們就可以使用 … 來設置可變參數。例如，用于創建盒子陰影（box-shadow）的一個混入（mixin）可以采取任何數量的 box-shadow 作為參數。

@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows; } .shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }

繼承 @extend

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。如果一個樣式與另外一個樣式幾乎相同，只有少量的區別，則使用 @extend 就顯得很有用。

.item{position: absolute; } .item1{@extend .item;color: red; } .item2{@extend .item;color: green; }/* 編譯后 */ .item, .item1, .item2 {position: absolute; } .item1{color: red; } .item2{color: green; }

好像用繼承沒有省太多的代碼 如下少寫一些重復class
使用 @extend 后，我們在 HTML 按鈕標簽中就不需要指定多個類 class=“item item1” ，只需要設置 class=“item1” 類就好了。

Mixins允許我們在項目中復用樣式片段，可以傳遞參數這個特性使得它們非常靈活，強大。同樣，我們也可以使用@extend命令讓一個選擇器繼承其它選擇器去復用樣式片段。有的時候Mixin和extend好像做了同樣的事情，那我們應該選擇哪一個呢？
@mixin主要的優勢就是它能夠接受參數。如果想傳遞參數，你會很自然地選擇@mixin而不是@extend。
如果沒有任何參數，使用@extend來創造DRY應該是個不錯的選擇。不過要注意的是，使用gzip壓縮過的文件可能會破壞代碼中的DRY。
在大作數情況下@mixin會比@extend更好，但是它們倆都有自己的一席之地。當樣式和選擇器之間的關系在某些方面比較緊密的時候，使用@extend。除此之外，你可以使用@mixin在任何地方。

官網原話 意思就是告訴你盡可能(直接使用混入不會有錯的)的使用@mixin

總結

以上是生活随笔為你收集整理的sass学习记录及vue实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。