快捷導(dǎo)航

Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式

更新時(shí)間：2023年06月13日 10:51:47 作者：天問

這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

近年來，前端技術(shù)日新月異，Vite、Vue3、Svelte、SolidJS 等框架工具大放異彩，身為一個(gè)前端開發(fā)，總感覺一刻不學(xué)習(xí)就要out了。最近使用 Vite3 + Svelte3 來構(gòu)建封裝自定義的 Web Components ，開始了艱難的爬坑之旅，本文記錄一下：Vite3 + Svelte3配置 Sass 預(yù)處理器，在 Svelte 單文件組件中使用 @import 導(dǎo)入 scss 樣式文件。

Vite + Svelte

Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構(gòu)建應(yīng)用程序的編譯階段來處理。

配置

安裝 svelte-preprocess 和 node-sass 插件

npm install svelte-preprocess node-sass --save-dev

配置 vite.config.js 文件

// vite.config.js
import sveltePreprocess from 'svelte-preprocess';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess(),
    }),
  ],
});

配置 Svelte 單文件組件

// index.svelte
<div class="box">
  <a  rel="external nofollow" >天問博客</a>
</div>
<script>
  let n = 0;
</script>
<style lang="scss" type="text/scss">
  @import "index.scss";
</style>

場景分析

在 <style> 中使用 @import "index.scss" 導(dǎo)入樣式，在打包的時(shí)候會(huì)把樣式混入 js 文件中，在封裝第三方獨(dú)立組件時(shí)推薦使用（如：獨(dú)立的自定義的 Web Components 組件），這樣在使用該組件時(shí)就不用額外引用 css 樣式文件。
在 <script> 中使用 import 'index.scss' 引入樣式，在打包的時(shí)候會(huì)把樣式單獨(dú)打包成 .css 文件，在構(gòu)建完整的 Web 應(yīng)用時(shí)推薦使用。

依賴版本信息：

{
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.2",
      "node-sass": "^7.0.3",
      "sass": "^1.54.9",
      "svelte": "^3.49.0",
      "svelte-preprocess": "^4.10.7",
      "vite": "^3.1.0"
  }
}

以上就是Vite3 + Svelte3使用@import導(dǎo)入scss樣式的詳細(xì)內(nèi)容，更多關(guān)于Vite3 Svelte3導(dǎo)入scss樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

2種在vue項(xiàng)目中使用百度地圖的簡單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡單的方法，非常實(shí)用，一起來學(xué)習(xí)下。
2018-09-09
使用Vue3實(shí)現(xiàn)一個(gè)穿梭框效果的示例代碼
這篇文章主要給大家介紹了如何使用?Vue3?實(shí)現(xiàn)一個(gè)穿梭框效果,當(dāng)選中數(shù)據(jù),并且點(diǎn)擊相對(duì)應(yīng)的方向箭頭時(shí),選中的數(shù)據(jù)會(huì)發(fā)送到對(duì)面,并且數(shù)據(jù)會(huì)保持正確的順序進(jìn)行排列,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下
2023-12-12
Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
vue+element?UI?文字加下劃線長度多出一點(diǎn)點(diǎn)的問題
這篇文章主要介紹了vue+element?UI?文字加下劃線長度多出一點(diǎn)點(diǎn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式
在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時(shí),若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive
2024-10-10
vue中粘貼板clipboard的使用方法舉例
在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見的操作之一,這篇文章主要給大家介紹了關(guān)于vue中粘貼板clipboard使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue.js購物車添加商品組件的方法
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
通過npm引用的vue組件使用詳解
本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下
2017-03-03
vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決
這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09