Vite3結(jié)合Svelte3使用@import導入scss樣式
前言
近年來,前端技術(shù)日新月異,Vite、Vue3、Svelte、SolidJS 等框架工具大放異彩,身為一個前端開發(fā),總感覺一刻不學習就要out了。最近使用 Vite3 + Svelte3 來構(gòu)建封裝自定義的 Web Components
,開始了艱難的爬坑之旅,本文記錄一下:Vite3 + Svelte3
配置 Sass
預處理器,在 Svelte
單文件組件中使用 @import
導入 scss
樣式文件。
Vite + Svelte
Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作,而 Svelte 將這些工作放到構(gòu)建應用程序的編譯階段來處理。
配置
- 安裝
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"
導入樣式,在打包的時候會把樣式混入 js 文件中,在封裝第三方獨立組件時推薦使用(如:獨立的自定義的 Web Components 組件),這樣在使用該組件時就不用額外引用 css 樣式文件。 - 在
<script>
中使用import 'index.scss'
引入樣式,在打包的時候會把樣式單獨打包成.css
文件,在構(gòu)建完整的Web
應用時推薦使用。
- 依賴版本信息:
{ "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導入scss樣式的詳細內(nèi)容,更多關(guān)于Vite3 Svelte3導入scss樣式的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的,然后就很順利的遇到了在安卓端掃碼的時候,順利的一塌糊涂,然后到了蘋果端的時候,就只能出現(xiàn)一個保存圖片,然后就寫一下記錄一下這問題的解決方法2020-01-01vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章,但基本都是本地攔截請求返回數(shù)據(jù),本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù),文中根據(jù)實例編碼詳細介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-07-07vue3中element-plus?icon圖標的正確使用姿勢
element-plus官方提示,Icon圖標正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標的正確使用姿勢,需要的朋友可以參考下2022-03-03