在vue項目中引入scss並使用scss樣式詳解

Posted on by

前言

小白記錄如何在vue項目中引入scss,並使用scss樣式

提示：以下是本篇文章正文內容，下面案例可供參考

一、scss是什麼？(和sass的區別)

scss是一種css預處理語言，是一個css的擴展，它在css語法的基礎上，允許您使用變量，嵌套規則，混合，導入，繼承等功能，使得css更加強大和優雅，而且其完全兼容css3。

scss 與 sass異同：sass和scss其實是一樣的css預處理語言

1.文件擴展名不同，Sass版本3.0之前的後綴名為.sass，而版本3.0之後的後綴名.scss。

2.語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號，而 Scss 的語法書寫和我們的CSS 語法書寫方式非常類似。

二、如何在vue項目中引入scss

1.安裝sass的依賴包

代碼如下（示例）：

//在開發環境安裝依賴
npm install --save-dev sass-loader

（若出錯，因為sass-loader版本過高導致，可以將其package.json中的版本改為7.3.1，然後再重新安裝sass-loader包，若是還過高，則重裝6.x,cnpm i [email protected] –save-dev）

2.sass-loader依賴於node-sass,安裝node-sass

代碼如下（示例）：

//在開發環境安裝依賴
npm install --save-dev node-sass

3.配置vue.config.js文件

1.在asstes文件夾下建立一個scss文件夾 然後創建一個 _variable.scss文件 用來存儲全局變量。

2.在vue.config.js中配置 sass

css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局變量   
      }
    }
  }

由於sass-loader的版本不同，這裡可能會報錯，不同的版本對應的關鍵字不一樣：
sass-loader v8-中，關鍵字為 “ data ”
sass-loader v8中，關鍵字為 “ prependData ”
sass-loader v10+中，關鍵字為 “ additionalData ”
（如果是在webpack.config.js中配置scss）,可根據https://blog.csdn.net/weixin_43846248/article/details/89056997進行配置

提示:可能新手不知道webpack.config.js和vue.config.js的區別 

webpack.config.js是webpack的配置文件，所有使用webpack作為打包工具的項目都可以使用，vue項目使用，react項目也可用。
vue.config.js是vue項目的配置文件，專用於vue項目。通過vue.config.js中常用功能的配置，簡化瞭配置工作，當然如果需要更專業的配置工作，兩者在vue項目中是可以並存的。
vue-cli3創建的時候並不會自動創建vue.config.js,因為這個是可選項，所以一般都是修改webpack的時候才會自己創建一個vue.config.js
再然後因為vue-cli3內部高度集成瞭webpack，一般來說使用者不需要再去webpack做瞭什麼，所以沒有暴露webpack的配置文件，但你依然可以創建vue.config.js去修改默認的webpack。極大的簡化瞭程序員配置webpack的工作

4.在App.vue文件中使用sass

<style lang="scss">
#app {
  color: $theme-color;
}
</style>

然後重啟服務器 npm run serve (註意你一旦修改瞭 vue.config.js文件 就要重啟服務器 因為你改瞭配置文件 它加載的是修改之前的)

補充：vue如何使用scss的全局變量

如果我們想使用公共的scss樣式變量（比如app的主題顏色），我們就隻能是每寫一個.vue文件都要在style標簽裡面@import “global.scss”這個公共scss樣式文件，但是這樣做，會很麻煩。

（上述情況，less同sass一樣，存在這些問題，但是less沒有以下解決辦法，sass有。）

但也有辦法解決，步驟如下：

1.安裝node-sass、sass-loader、style-loader

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

2.安裝sass-resources-loader

cnpm install sass-resources-loader --save-dev

修改build中的utils.js

將

scss: generateLoaders('sass')

修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    )

可知，我是在assets中創建瞭一個global.scss 作為公共樣式文件。

最後在vue組件中的style標簽中添加lang="scss"，就ok瞭。這樣我們就實現瞭全局引入scss。

總結

到此這篇關於在vue項目中引入scss並使用scss樣式的文章就介紹到這瞭,更多相關vue引入使用scss樣式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：