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

原创已于 2022-09-21 08:26:58 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #javascript #前端框架

于 2022-09-20 17:50:25 首次发布

大前端专栏收录该内容

67 篇文章

订阅专栏

本文介绍如何在Vite3+Svelte3项目中配置Sass预处理器，并演示了在Svelte单文件组件中通过@import导入scss样式的具体操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Vite + Svelte

前言

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

配置

安装 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 href="https://tiven.cn">天问博客</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 文件，在构建完整的 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"
  }
}

欢迎访问：天问博客