脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vite3 Svelte3导入scss样式

Vite3结合Svelte3使用@import导入scss样式

 更新时间：2023年06月13日 10:51:47   作者：天問  
这篇文章主要为大家介绍了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 将这些工作放到构建应用程序的编译阶段来处理。

配置

  • 安装 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" rel="external nofollow" >天问博客</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"
  }
}

以上就是Vite3 + Svelte3使用@import导入scss样式的详细内容，更多关于Vite3 Svelte3导入scss样式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 2种在vue项目中使用百度地图的简单方法

    2种在vue项目中使用百度地图的简单方法

    在本篇文章中我们给大家整理了2种关于VUE项目中使用百度地图的最简单的方法，非常实用，一起来学习下。
    2018-09-09
  • 使用Vue3实现一个穿梭框效果的示例代码

    使用Vue3实现一个穿梭框效果的示例代码

    这篇文章主要给大家介绍了如何使用 Vue3 实现一个穿梭框效果,当选中数据,并且点击相对应的方向箭头时,选中的数据会发送到对面,并且数据会保持正确的顺序进行排列,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下
    2023-12-12
  • Vue自定义render统一项目组弹框功能

    Vue自定义render统一项目组弹框功能

    这篇文章主要介绍了Vue自定义render统一项目组弹框功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • vue+element UI 文字加下划线长度多出一点点的问题

    vue+element UI 文字加下划线长度多出一点点的问题

    这篇文章主要介绍了vue+element UI 文字加下划线长度多出一点点的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue3页面query参数变化并重新加载页面数据方式

    vue3页面query参数变化并重新加载页面数据方式

    在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive
    2024-10-10
  • vue中粘贴板clipboard的使用方法举例

    vue中粘贴板clipboard的使用方法举例

    在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,这篇文章主要给大家介绍了关于vue中粘贴板clipboard使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue.js购物车添加商品组件的方法

    vue.js购物车添加商品组件的方法

    这篇文章主要介绍了vue.js购物车添加商品组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 通过npm引用的vue组件使用详解

    通过npm引用的vue组件使用详解

    本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。本文给大家介绍的非常详细，需要的的朋友参考下
    2017-03-03
  • vue跨域处理方式(vue项目中baseUrl设置问题)

    vue跨域处理方式(vue项目中baseUrl设置问题)

    这篇文章主要介绍了vue跨域处理方式(vue项目中baseUrl设置问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    这篇文章主要介绍了VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论