前言

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

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

一、scss是什么？(和sass的區(qū)別)

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

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

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

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

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

1.安裝sass的依賴包

代碼如下（示例）：

//在開發(fā)環(huán)境安裝依賴
npm install --save-dev sass-loader

（若出錯，因為sass-loader版本過高導(dǎo)致，可以將其package.json中的版本改為7.3.1，然后再重新安裝sass-loader包，若是還過高，則重裝6.x,cnpm i sass-loader@6.x --save-dev）

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

代碼如下（示例）：

//在開發(fā)環(huán)境安裝依賴
npm install --save-dev node-sass

3.配置vue.config.js文件

1.在asstes文件夾下建立一個scss文件夾 然后創(chuàng)建一個 _variable.scss文件 用來存儲全局變量。

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

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

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

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

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

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

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

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

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

如果我們想使用公共的scss樣式變量（比如app的主題顏色），我們就只能是每寫一個.vue文件都要在style標(biāo)簽里面@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中創(chuàng)建了一個global.scss 作為公共樣式文件。

最后在vue組件中的style標(biāo)簽中添加lang="scss"，就ok了。這樣我們就實現(xiàn)了全局引入scss。

總結(jié)

到此這篇關(guān)于在vue項目中引入scss并使用scss樣式的文章就介紹到這了,更多相關(guān)vue引入使用scss樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論