近年来,前端技术日新月异,Vite、Vue3、Svelte、SolidJS 等框架工具大放异彩,身为一个前端开发,总感觉一刻不学习就要out了。最近使用 Vite3 + Svelte3 来构建封装自定义的 Web Components
,开始了艰难的爬坑之旅,本文记录一下:Vite3 + Svelte3
配置 Sass
预处理器,在 Svelte
单文件组件中使用 @import
导入 scss
样式文件。
前言
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
配置
- 安装
svelte-preprocess
和node-sass
插件
1 | npm install svelte-preprocess node-sass --save-dev |
- 配置
vite.config.js
文件
1 | // vite.config.js |
- 配置 Svelte 单文件组件
1 | // index.svelte |
场景分析
- 在
<style>
中使用@import "index.scss"
导入样式,在打包的时候会把样式混入 js 文件中,在封装第三方独立组件时推荐使用(如:独立的自定义的 Web Components 组件),这样在使用该组件时就不用额外引用 css 样式文件。 - 在
<script>
中使用import 'index.scss'
引入样式,在打包的时候会把样式单独打包成.css
文件,在构建完整的Web
应用时推荐使用。
- 依赖版本信息:
1 | { |
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-09-14
最后更新: 2023-03-02
本文标题: Vite3 + Svelte3使用@import导入scss样式
本文链接: https://www.tiven.cn/p/bea28b54/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-09-14
最后更新: 2023-03-02
本文标题: Vite3 + Svelte3使用@import导入scss样式
本文链接: https://www.tiven.cn/p/bea28b54/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!