• Vite3 + Svelte3使用@import导入scss样式

    近年来，前端技术日新月异，Vite、Vue3、Svelte、SolidJS 等框架工具大放异彩，身为一个前端开发，总感觉一刻不学习就要out了。最近使用 Vite3 + Svelte3 来构建封装自定义的 Web Components ，开始了艰难的爬坑之旅，本文记录一下：Vite3 + Svelte3配置 Sass 预处理器，在 Svelte 单文件组件中使用 @import 导入 scss 样式文件。

    Vite + Svelte

    前言

    Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

    配置

    1. 安装 svelte-preprocess 和 node-sass 插件
    npm install svelte-preprocess node-sass --save-dev
    1. 配置 vite.config.js 文件
    // vite.config.js
import sveltePreprocess from 'svelte-preprocess';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess(),
    }),
  ],
});
    1. 配置 Svelte 单文件组件
    // index.svelte

<div class="box">
  <a href="https://tiven.cn">天问博客a>
div>

<script>
  let n = 0;
script>

<style lang="scss" type="text/scss">
  @import "index.scss";
style>

    场景分析

    1. 在