Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
更新時間：2023年06月13日 10:51:47 作者：天問
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
近年來，前端技術(shù)日新月異，Vite、Vue3、Svelte、SolidJS 等框架工具大放異彩，身為一個前端開發(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)入樣式，在打包的時候會把樣式混入 js 文件中，在封裝第三方獨立組件時推薦使用（如：獨立的自定義的 Web Components 組件），這樣在使用該組件時就不用額外引用 css 樣式文件。 - 在
<script>中使用import 'index.scss'引入樣式，在打包的時候會把樣式單獨打包成.css文件，在構(gòu)建完整的Web應(yīng)用時推薦使用。
- 依賴版本信息：
{
"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樣式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在本篇文章中我們給大家整理了2種關(guān)于VUE項目中使用百度地圖的最簡單的方法，非常實用，一起來學(xué)習(xí)下。2018-09-09
這篇文章主要給大家介紹了如何使用?Vue3?實現(xiàn)一個穿梭框效果,當(dāng)選中數(shù)據(jù),并且點擊相對應(yīng)的方向箭頭時,選中的數(shù)據(jù)會發(fā)送到對面,并且數(shù)據(jù)會保持正確的順序進(jìn)行排列,文中有詳細(xì)的代碼講解,具有一定的參考價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue自定義render統(tǒng)一項目組彈框功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
vue+element?UI?文字加下劃線長度多出一點點的問題
這篇文章主要介紹了vue+element?UI?文字加下劃線長度多出一點點的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式
在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時,若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive2024-10-10
在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見的操作之一,這篇文章主要給大家介紹了關(guān)于vue中粘貼板clipboard使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
本文章通過實現(xiàn)一個vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下2017-03-03
vue跨域處理方式(vue項目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項目中baseUrl設(shè)置問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決
這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09