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


字数:490 阅读时长:2分钟 阅读:85

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

Vite + Svelte

前言

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

配置

  1. 安装 svelte-preprocessnode-sass 插件
1
npm install svelte-preprocess node-sass --save-dev
  1. 配置 vite.config.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.js
import sveltePreprocess from 'svelte-preprocess';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
svelte({
// ...
preprocess: sveltePreprocess(),
}),
],
});
  1. 配置 Svelte 单文件组件
1
2
3
4
5
6
7
8
9
10
11
12
13
// 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. <style> 中使用 @import "index.scss" 导入样式,在打包的时候会把样式混入 js 文件中,在封装第三方独立组件时推荐使用(如:独立的自定义的 Web Components 组件),这样在使用该组件时就不用额外引用 css 样式文件。
  2. <script> 中使用 import 'index.scss' 引入样式,在打包的时候会把样式单独打包成 .css 文件,在构建完整的 Web 应用时推荐使用。
  • 依赖版本信息:
1
2
3
4
5
6
7
8
9
10
{
"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"
}
}

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-09-14
最后更新: 2023-07-17
本文标题: Vite3 + Svelte3使用@import导入scss样式
本文链接: https://www.tiven.cn/p/bea28b54/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!