Vite3 + Svelte3：如何使用@import 导入scss样式？

2023-10-05 14:24:12

轻松配置 Vite + Svelte 支持 Sass

在现代前端开发中，Vite 和 Svelte 已成为构建高效应用程序的热门工具。结合 Sass 预处理器，您可以编写更简洁、更易维护的样式代码。本文将指导您如何设置 Vite + Svelte 以支持 Sass。

安装依赖项

首先，使用以下命令安装必要的依赖项：

npm install --save-dev sass vite-plugin-svelte

配置 Vite

在您的 Vite 配置文件中（通常是 vite.config.js），添加以下内容：

// vite.config.js
import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import sassPlugin from 'vite-plugin-sass'

export default defineConfig({
  plugins: [
    svelte(),
    sassPlugin()
  ]
})

这会为 Vite 添加对 Svelte 和 Sass 的支持。

导入 Sass 样式

在您的 Svelte 组件中，您可以使用 <style> 标签导入外部的 Sass 样式文件：

<script>
  import { onMount } from 'svelte'

  let count = 0

  onMount(() => {
    setInterval(() => {
      count += 1
    }, 1000)
  })
</script>

<style>
  @import './styles.scss'

  .container {
    font-family: 'Arial', sans-serif;
    margin: 20px;
  }

  .counter {
    font-size: 24px;
    color: blue;
  }
</style>

<div class="container">
  <h1 class="counter">{count}</h1>
</div>

使用 @import 导入外部 Sass

您还可以使用 @import 指令在 Svelte 组件中导入外部的 Sass 样式文件：

// styles.scss
@import './variables.scss'

.container {
  font-family: $font-stack;
  margin: 20px;
}

.counter {
  font-size: 24px;
  color: $primary-color;
}

在 Svelte 组件中，通过以下方式导入 styles.scss：

<script>
  import { onMount } from 'svelte'

  let count = 0

  onMount(() => {
    setInterval(() => {
      count += 1
    }, 1000)
  })
</script>

<style>
  @import './styles.scss'
</style>

<div class="container">
  <h1 class="counter">{count}</h1>
</div>