vue-cli 3.0集成sass/scss到vue項目

如果在創建項目沒有選擇CSS 預處理器，我們也可以手動安裝sass-loader node-sass來集成scss。

npm install -D sass-loader node-sass

這時候安裝完就可以在組件中使用scss了。

<style scoped lang="scss">
.wrap {
    h1{
        color:blue;
    }
}
</style>

引入SCSS全局變量

_variable.scss

$color-theme:#498eff;

如果想要使用scss變量的話，需要對配置文件做如下修改

vue service clie會自動使用我們安裝的sass-loader作為scss內容的加載器。vue cli是基於webpack構建項目，如果想對sass-loader傳遞一些配置項，可以在vue.config.js配置。在項目的根目錄下如果沒有找到vue.config.js，手動創建即可。如下：

// vue.config.js
const fs = require('fs')
module.exports = {
  css: {
    loaderOptions: {
      sass: {
            prependData: `@import "~@/assets/scss/_variable.scss";`
            } 
         } 
      } 
}

這個文件variables.scss也是可以通過import在.vue組件里引入。

修改完配置文件記得重啟下項目，接下來就可以使用scss變量，函數等功能了。

<style scoped lang="scss">
.wrap {
    h1{
        color:$color-theme;
    }
}
</style>