脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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样式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue随机验证码组件的封装实现

    vue随机验证码组件的封装实现

    这篇文章主要为大家详细介绍了如何封装一个随机验证码的VUE组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法
    2020-01-01
  • Vue3 table表格组件的使用

    Vue3 table表格组件的使用

    这篇文章主要介绍了Vue3 table表格组件的使用，文章围绕table表格组件是如何使用的相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue-cli实现异步请求返回mock模拟数据

    vue-cli实现异步请求返回mock模拟数据

    网上有不少使用mockjs模拟数据的文章，但基本都是本地拦截请求返回数据，本文主要介绍了vue-cli实现异步请求返回mock模拟数据，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中v-for和v-if不能在同一个标签使用的最新解决方案

    vue中v-for和v-if不能在同一个标签使用的最新解决方案

    这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-07-07
  • vue中使用Axios最佳实践方式

    vue中使用Axios最佳实践方式

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下
    2022-09-09
  • 使用Vue3生成二维码和条形码详细图文教程

    使用Vue3生成二维码和条形码详细图文教程

    在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
    2024-09-09
  • vue3中element-plus icon图标的正确使用姿势

    vue3中element-plus icon图标的正确使用姿势

    element-plus官方提示,Icon图标正在向SVG Icon迁移,之前使用的Font Icon即将被弃用,下面这篇文章主要给大家介绍了关于vue3中element-plus icon图标的正确使用姿势,需要的朋友可以参考下
    2022-03-03
  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    解决vue项目打包上服务器显示404错误,本地没出错的问题

    这篇文章主要介绍了解决vue项目打包上服务器显示404错误,本地没出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue分类筛选filter方法简单实例

    vue分类筛选filter方法简单实例

    这篇文章主要介绍了vue分类筛选filter方法的简单实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论