欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vite 項(xiàng)目中如何使用Sass

 更新時間：2024年04月27日 16:58:45   作者：Carlos_sam  
Vite默認(rèn)集成了對Sass的支持,你只需要安裝Sass本身即可,這篇文章主要介紹了vite 項(xiàng)目中如何使用Sass,需要的朋友可以參考下

1.安裝

npm add sass

注意：有些博客中會告訴你需要 安裝sass-loader和sass，這是webpack項(xiàng)目中的做法。而在Vite環(huán)境中，如果你想使用Sass預(yù)處理器，實(shí)際上并不需要單獨(dú)安裝sass-loader。Vite默認(rèn)集成了對Sass的支持，你只需要安裝Sass本身即可。

2.配置

在許多博客中都會告訴你要在vite.config.js中進(jìn)行這樣的配置：

export default defineConfig({
  //...
  css: {
    // css預(yù)處理器
    preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 這樣就可以在全局中使用 mixin.scss中預(yù)定義的變量了
        // 給導(dǎo)入的路徑最后加上 ; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }
})

這么做的目的是全局引入樣式 (就是這部分additionalData: '@import "@/assets/style/mixin.scss";')

它其實(shí)等同于在main.js中寫入以下的代碼:

import { createApp } from 'vue'
import App from './App.vue'
import "@/assets/style/mixin.scss"
createApp(App).mount('#app')

3.使用

詳細(xì)的使用方法請參考：Sass: Sass Basics

參考資料

  1. 在Vite中配置SCSS全局變量及可能的坑
  2. 在vite初始化的項(xiàng)目中安裝scss，及scss的使用
  3. Vite + Vue3項(xiàng)目添加sass 

到此這篇關(guān)于vite 項(xiàng)目中如何使用Sass的文章就介紹到這了,更多相關(guān)vite 使用Sass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)

    vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)

    本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入

    vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入

    這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

    Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置

    這篇文章主要介紹了Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-04
  • VUE組件傳參超詳細(xì)講解

    VUE組件傳參超詳細(xì)講解

    vue的特點(diǎn)之一是組件化開發(fā)，那么問題來了，組件中的數(shù)據(jù)和方法都是獨(dú)立的，我們?nèi)绾芜M(jìn)行組件之間的交互呢。這個時候就要用到組件傳參了
    2022-07-07
  • vue大文件分片上傳之simple-uploader.js的使用

    vue大文件分片上傳之simple-uploader.js的使用

    本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • 基于vue.js實(shí)現(xiàn)購物車

    基于vue.js實(shí)現(xiàn)購物車

    這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • vue echarts實(shí)現(xiàn)柱狀圖動態(tài)展示

    vue echarts實(shí)現(xiàn)柱狀圖動態(tài)展示

    這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動態(tài)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • 詳解Vue新增內(nèi)置組件的使用

    詳解Vue新增內(nèi)置組件的使用

    這篇文章主要為大家介紹了Vue新增內(nèi)置組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-12-12
  • vuex中mapState思想應(yīng)用

    vuex中mapState思想應(yīng)用

    這篇文章主要分享vuex中mapState思想及應(yīng)用，在需求開發(fā)過程中，有的接口返回的結(jié)果中有很多字段需要展示到頁面上。通?？梢詫⑦@些字段在.vue文件中封裝為計(jì)算屬性，或者重新將對應(yīng)字段賦值到 data 中的字段來達(dá)到便于使用的目的，具體內(nèi)容，我們一起來看下面文章內(nèi)容吧
    2021-10-10
  • vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼

    vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼

    頁面中會有很多時候需要彈窗提示,我們可以寫一個彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-12-12

最新評論