快捷導(dǎo)航

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

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

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

前言

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

Vite + Svelte

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

配置

安裝 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" >天問(wèn)博客</a>
</div>
<script>
  let n = 0;
</script>
<style lang="scss" type="text/scss">
  @import "index.scss";
</style>

場(chǎng)景分析

在 <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)文章

vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
Vue 微信端掃描二維碼蘋(píng)果端卻只能保存圖片問(wèn)題(解決方法)
這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁(yè)巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時(shí)候，順利的一塌糊涂，然后到了蘋(píng)果端的時(shí)候，就只能出現(xiàn)一個(gè)保存圖片，然后就寫(xiě)一下記錄一下這問(wèn)題的解決方法
2020-01-01
Vue3 table表格組件的使用
這篇文章主要介紹了Vue3 table表格組件的使用，文章圍繞table表格組件是如何使用的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地?cái)r截請(qǐng)求返回?cái)?shù)據(jù)，本文主要介紹了vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個(gè)標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
vue中使用Axios最佳實(shí)踐方式
Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和?node.js，Axios?使用簡(jiǎn)單,包尺寸小且提供了易于擴(kuò)展的接口，這篇文章主要介紹了vue中使用Axios最佳實(shí)踐,需要的朋友可以參考下
2022-09-09
使用Vue3生成二維碼和條形碼詳細(xì)圖文教程
在Vue項(xiàng)目和微信小程序中生成二維碼和條形碼是一個(gè)常見(jiàn)的需求,主要用于分享、產(chǎn)品識(shí)別等場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下
2024-09-09
vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì)
element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì),需要的朋友可以參考下
2022-03-03
解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue分類篩選filter方法簡(jiǎn)單實(shí)例
這篇文章主要介紹了vue分類篩選filter方法的簡(jiǎn)單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03