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

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

  • vue隨機驗證碼組件的封裝實現(xiàn)

    vue隨機驗證碼組件的封裝實現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了如何封裝一個隨機驗證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)

    Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)

    這幾天在做項目時遇到微信掃描二維碼的然后進(jìn)入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法
    2020-01-01
  • Vue3 table表格組件的使用

    Vue3 table表格組件的使用

    這篇文章主要介紹了Vue3 table表格組件的使用，文章圍繞table表格組件是如何使用的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)

    vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)

    網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地攔截請求返回數(shù)據(jù)，本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue中v-for和v-if不能在同一個標(biāo)簽使用的最新解決方案

    vue中v-for和v-if不能在同一個標(biāo)簽使用的最新解決方案

    這篇文章主要介紹了vue中v-for和v-if不能在同一個標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-07-07
  • vue中使用Axios最佳實踐方式

    vue中使用Axios最佳實踐方式

    Axios?是一個基于?promise?的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和?node.js，Axios?使用簡單,包尺寸小且提供了易于擴(kuò)展的接口，這篇文章主要介紹了vue中使用Axios最佳實踐,需要的朋友可以參考下
    2022-09-09
  • 使用Vue3生成二維碼和條形碼詳細(xì)圖文教程

    使用Vue3生成二維碼和條形碼詳細(xì)圖文教程

    在Vue項目和微信小程序中生成二維碼和條形碼是一個常見的需求,主要用于分享、產(chǎn)品識別等場景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下
    2024-09-09
  • vue3中element-plus?icon圖標(biāo)的正確使用姿勢

    vue3中element-plus?icon圖標(biāo)的正確使用姿勢

    element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢,需要的朋友可以參考下
    2022-03-03
  • 解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題

    解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題

    這篇文章主要介紹了解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue分類篩選filter方法簡單實例

    vue分類篩選filter方法簡單實例

    這篇文章主要介紹了vue分類篩選filter方法的簡單實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03

最新評論