vue3项目中配置sass,vite报错Undefined mixin问题

 更新时间:2024年02月08日 16:23:02   作者:qq_41419473  
这篇文章主要介绍了vue3项目中配置sass,vite报错Undefined mixin问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3项目配置sass,vite报错Undefined mixin

vite报错

报错代码

是因为scss的内置语法需要预编译。

在vite.config.ts配置

css: {
    preprocessorOptions: {
      // 导入scss预编译程序
      scss: {
        additionalData: `@use "@/styles/modules/mixin.scss" as *;`,
      },
    },
  },

这样就可以使用mixin.scss中的混淆变量了

在Vite和Vue3项目中使用和配置sass

怎么在vue3项目中使用sass作为css预处理器。

代码

直接安装sass就可以了,其他的都不用配置。

npm i sass -D

原因

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中使用jsencrypt进行RSA非对称加密的操作方法

    Vue中使用jsencrypt进行RSA非对称加密的操作方法

    这篇文章主要介绍了Vue中使用jsencrypt进行RSA非对称加密,在这里需要注意要加密的数据必须是字符串,对Vue RSA非对称加密相关知识感兴趣的朋友一起看看吧
    2022-04-04
  • vue-element内table插入超链接a标签的使用

    vue-element内table插入超链接a标签的使用

    在Vue Element的table组件中插入超链接,可以使用<el-link>标签替代传统的<a>标签,实现更加整洁的UI设计,具体操作是替换原有的<span>标签,直接使用<el-link>进行超链接的插入,使得链接样式与Element UI保持一致
    2024-09-09
  • vue(2.x,3.0)配置跨域代理

    vue(2.x,3.0)配置跨域代理

    这篇文章主要介绍了vue(2.x,3.0)配置跨域代理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • VUE2实现事件驱动弹窗示例

    VUE2实现事件驱动弹窗示例

    本篇文章主要介绍了VUE2实现事件驱动弹窗示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue实现移动端日历的示例代码

    Vue实现移动端日历的示例代码

    工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下,希望对大家有所帮助
    2023-04-04
  • Vue如何实现数据的上移和下移

    Vue如何实现数据的上移和下移

    这篇文章主要介绍了Vue如何实现数据的上移和下移问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue如何使用driver.js实现项目功能向导指引

    vue如何使用driver.js实现项目功能向导指引

    driver.js 是一个轻量级、无依赖的原生JavaScript引擎,在整个页面中驱动用户的注意力,强大的、高度可定制的原生JavaScript引擎,无外部依赖,支持所有主流浏览器,这篇文章主要介绍了vue如何使用driver.js实现项目功能向导指引,需要的朋友可以参考下
    2023-03-03
  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个功能用import.meta.glob来引入多个,单个的文件,下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下
    2022-11-11
  • vue 移动端记录页面浏览位置的方法

    vue 移动端记录页面浏览位置的方法

    这篇文章主要介绍了vue 移动端记录页面浏览位置的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 示例详解Vue中控制组件的挂载位置

    示例详解Vue中控制组件的挂载位置

    在 Vue 中,append-to-body=“true” 主要用于一些第三方组件(如 Element UI 或 Ant Design Vue 中的弹出框、下拉菜单等)来控制组件的挂载位置,本文介绍Vue中控制组件的挂载位置,感兴趣的朋友跟随小编一起看看吧
    2024-12-12

最新评论