vue項目使用scss

一、安裝sass 依賴包 

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

二、在build文件夾下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

但是！！vue-cli腳手架已經自動的幫我們將scss的配置寫在了utils.js文件里面，不需要在webpack.base.conf.js這個文件中配置了

// build/utils.js
// 添加代碼
function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../scss/demo.scss'), // 是你自己的路徑和文件名

                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  }


// 修改代碼
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

 

然后發現一直報錯：this.getResolve is not a function，是因為 sass-loader 現在安裝的是8.0.0版本的，解決方法：

1.npm uninstall sass-loader //卸載sass-loader
2.npm install sass-loader@7.3.1 --save-dev //安裝7.3.1版本的scss，然后啟動項目就ok了

 

 

 

 

效果：

 

 

 

 

 

三、進一步了解SCSS 的使用語法

1. 注釋分為三種：

　　/* */ css中顯示，

　　// css中不顯示，

　　/* 重要注釋! */ 壓縮不會被刪掉。

　　·@import 命令導入外部sass、scss、css文件

<style lang="scss" scoped>
@import './test.scss'; //導入外部scss文件
.myText {
   border:1px solid red;
}
</style>

2. 變量

　　聲明變量的語法是：$+變量名+：+變量值；

$color:red; //聲明變量 $color

　　1. 默認變量只需要在變量值后加上 !default , 用來設置默認值 ，對默認變量進行重新聲明可以實現覆蓋默認值；如

$color:red !default; //聲明默認變量 $color
$color:purple; //根據需求覆蓋默認變量
.father01 {
   color:$color;
}

　　2.區分全局變量和局部變量

　　全局變量是元素外聲明的變量，局部變量是在元素里聲明的變量，重復聲明時局部變量會覆蓋全局變量；

$height:200px; //全局變量聲明不在大花括號內
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部變量是聲明在元素內的
      border: $border;
      $bgcolor:purple; //全局變量和局部變量名一致時，調用局部變量進行覆蓋
      background-color: $bgcolor;
   }
}

　　3. 局部變量值后加上 !global 關鍵詞可以使得局部變量變成全局變量；

body {
   .father01 {
      width:200px;
      height:200px;
      $border:1px solid red !global; //使用global關鍵詞將$border變為了全局變量
      border:$border;
   }
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局變量
   }
}

 

3. 變量嵌套引用：即字符串插值，需要使用 #{} 來進行包裹

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值之前必須先聲明
}

 

4. 變量計算

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

// 數字運算: 支持數字的加減乘除、取整等運算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

// 字符串運算： + 可用於連接字符串
// 注意，①：如果有引號字符串（位於 + 左側）連接無引號字符串，運算結果是有引號的，
// 相反，②：無引號字符串（位於 + 左側）連接有引號字符串，運算結果則沒有引號

p {
    cursor: e + -resize;
} 
//編譯后
 p {
    cursor: e-resize; 
}

p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";
}
// 編譯后
p:before {
    content: "Foo Bar";
    font-family: sans-serif;
}

 

5. 嵌套

// 選擇器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

// 屬性嵌套，比如border-color屬性，可以寫成：
p {
    border: {   // 注意，border后面必須加上冒號。
        color: red;
    }
}

// 在嵌套的代碼塊內，可以使用&引用父元素。比如a:hover偽類，可以寫成
a {
    &:hover { color: #ffb3ff; } 
}

.container {
   &>p {   //可以編譯成CSS的 .container>p {} 效果
      color:purple;
   }
}

 

6. 代碼的重用---繼承

// 繼承是基於類class的（有時是基於其他類型的選擇器）
// 允許一個選擇器，繼承另一個選擇器。比如，現有class1：

.class1 {
    border: 1px solid #ddd;
}

// class2要繼承class1，就要使用@extend命令：
.class2 {
     @extend .class1; // 這里將繼承.class1 類的所有樣式
     font-size:120%;
 }

 

7. 代碼的重用---混合器Mixin

避免不停的重復一段樣式

   // 使用@mixin命令，定義一個代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調用這個mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強大之處，在於可以指定參數和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時候，根據需要加入參數：
　　div {
　　　　@include left(20px);
　　}

 

8. 條件語句

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

 

9. SCSS中的三種循環

1. for循環：

　　在sass中的@for循環有兩種方式：

　　①. @for $i from <start> through <end>

　　②. @for $i from <start> to <end>

　　其中$i表示變量，start表示開始值，end表示結束值；

　　through表示包括end這個數值；to表示不包括end這個數值；

2. while循環

　　只要@while后面的條件為true就會執行，直到表達式值為false時停止循環；

3. each in循環

　　就是去遍歷一個列表，然后從列表中取出對用值；他的指令形式為：@each $var in <list>($var為變量值，list為sassscript表達式）

//for 循環
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}
//while 循環
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//這里可以對$m進行運算 讓它每次都減去2
//each 語法
@each $item in class01,class02 { //$item就是遍歷了in關鍵詞后面的類名列
   .#{$item} {
      background-color:purple;
   }
}
//會編譯成 .class01 , .class02 {background-color:purple;}

 

10. 使用@function 自定義函數及使用

@function double($sn){ //SCSS允許自定義函數
   @return $sn*2;
}
.myText {
   border:1px solid red;
   width:double(200px); //使用在SCSS中自定義的函數
}

 

11. 可以直接使用SCSS內置的顏色函數

.myText {
   color:black;
   &:hover{
      //以下的lighten()、darken()等是SCSS內置的顏色函數
      color:lighten(#cc3, 10%); // #d6d65c顏色變淺
      color:darken(#cc3, 10%); // #a3a329顏色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}

 

 

 

 

參考：https://blog.csdn.net/sinat_37680470/article/details/79929400

參考：https://www.cnblogs.com/wiliam/p/12027469.html

參考：https://blog.csdn.net/zhouzuoluo/article/details/81010331

參考：https://segmentfault.com/a/1190000019573996?utm_source=tag-newest