vue3项目中配置sass，vite报错Undefined mixin

已于 2022-07-06 20:53:31 修改
阅读量5.6k 收藏 5
点赞数 1
分类专栏： 问题日志 文章标签： 前端 sass vue.js
于 2022-07-06 20:45:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41419473/article/details/125647470
版权

vite报错

报错代码

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

在vite.config.ts配置

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

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

qq_41419473
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3初始化项目 sass vite ts
08-01
vue3初始化项目 sass vite ts
详解vue-cli中配置sass
12-07
如何配置sass 一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上 rules: [ { test: /\.vue$/, loader: '...
[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案
11-13 9050
在使用Vue3 + Vite2开发过程中，使用了SCSS 以往在main.js使用引入全局样式表就可以了 @import './styles/mixins.scss'; 但是实操中得到了这样的一个错误 [vite] Internal server error: Undefined mixin. 4 │ @include flex-row-lc; 翻阅文档: https://vitejs.bootcss.com/config/#css-preprocessoroptions 得知需要通过..
Vue3中使用Sass详解
最新发布
2401_84091628的博客
05-14 506
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue3+vite中报错[plugin:vite:css] [sass] Undefined mixin
浩星
11-07 5766
vue3项目中使用sass时报错不认识mixin.
vue3.0 引用公共文件的混入样式，报错：SassError: Undefined mixin.定位于@include XXXXXX;
热门推荐
xiaozhi_free的博客
12-20 1万+
vue3.0根目录新建文件vue.config.js 配置： module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/css/mixin.scss";` } } ...
vitepress 使用 unocss 方式
林达浪学前端
04-25 499
vitepress 使用 unocss 方式
[plugin:vite:css] [sass] Undefined mixin.
zhou13528482267的博客
09-22 1327
scss报错： [plugin:vite:css] [sass] Undefined mixin.前言： vite + vue3 + TypeScript环境。在vite.config.ts文件添加配置。
解决[plugin:vite:css] [sass] Undefined mixin.报错信息
编程小白的博客
02-02 1205
解决[plugin:vite:css] [sass] Undefined mixin.报错信息
使用susy内置混合宏异常：Undefined mixin ‘at-breakpoint‘
weisheixiaoxin的博客
09-12 1163
快速解决导入susy包错误！修改为： @import 'susyone';1. 收集问题compass编译sass脚本时报错：Undefined mixin ‘at-breakpoint’ 异常信息：没有找到宏’at-breakpoint’cmd.exe /D /C call "D:/laher/Program Files/ruby/Ruby24-x64/bin/compass.bat" comp
【VUE2】uniapp uni.scss中使用@mixin混入，在文件引入@include 样式不生效 Error: Undefined mixin.（踩坑记录一）
weixin_44216637的博客
03-29 936
Error: Undefined mixin. @include flex()
Vue组件页面渲染正常对象报错undefined
call_me_fly的博客
07-18 1万+
   首先，页面代码：{{options.fileList[0].fullPath}}，    渲染结果：（渲染成功），   但是控制台依然报错：    如果有跟我遇到同样问题的朋友一定跟我一样，心里一万只草泥马飘过，都显示正常了，你TM的还给我报错，这我就忍不了了，首先我在页面节点上直接打印，OK，没有问题，能完美的打印出来，然后换了个思路，在mounted里面看看什么情况呢，功夫不负有心...
在vue项目中使用sass的配置方法
08-27
在 Vue 项目中使用 Sass 的配置方法 在 Vue 项目中使用 Sass 需要进行一些配置，以下是详细的配置步骤。 第一步：创建新项目 首先，我们需要创建一个基于 Webpack 模板的新项目。我们可以使用 Vue CLI 来创建项目...
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
vue,mixin混入
weixin_43228946的博客
10-06 314
vue,mixin可以把多个组件共用的配置提取成一个混入对象
Syntax Error: SassError: Undefined variable. ╷ 314 │ color: $u-primary； │
weixin_44563526的博客
04-27 1万+
项目场景： 使用Uni-app创建文件并使用Uview引用scss报错 问题描述 安装sass后 启动会报 找不到这个东西 原因分析： 1.可能是配置全局引用没有完整 查看自己是否全局引用完整 1.安装依赖 // 安装sass npm i sass -D // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错 npm i sass-loader@10 -D 2.安装uview-ui npm install uview-ui 默认版本为1.X 官网默认打开
elementui源碼解讀-問題7 SCSS問題
losedguest的博客
11-27 193
異常 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin. @include b(button) { // 此處內容即mixin里的@content } 使用SCSS @include 但是使用@mixin定義 b 增加定義如下 @mixin b($block) { $B: $block !global; .#{$B} { @content;
vue3 报错合集
xiao_cheng_的博客
01-20 9742
vue3报错合集 1、使用el-table时报错： Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor ‘Object’ | property ‘vnode’ -> object with constructor ‘Object’— property ‘component’ closes the circle 原本只
vue3在使用vite打包配置报错
03-30
如果您在使用 Vue3 和 Vite 打包时遇到了错误，可能是因为您的配置有误或者依赖包不兼容。以下是一些可能的解决方案： 1. 检查依赖包版本是否兼容 Vue3 和 Vite。 2. 确认 Vite 的配置文件是否正确设置了 Vue 插件。在 `vite.config.js` 文件中添加以下代码： ``` import { createVuePlugin } from 'vite-plugin-vue2' // 或者 import { createVuePlugin } from 'vite-plugin-vue3' export default { plugins: [ createVuePlugin(), ], } ``` 3. 确认 Vue3 的编译器是否已安装。在终端中运行以下命令： ``` npm install @vue/compiler-sfc --save-dev ``` 4. 如果您使用了 TypeScript，请确认 TypeScript 的配置文件是否正确。在 `tsconfig.json` 文件中添加以下代码： ``` { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": [ "esnext", "dom" ] } } ``` 5. 如果您的应用程序中使用了第三方库，请确认该库是否与 Vue3 兼容。如果不兼容，请尝试升级该库或使用其他库。 如果您仍然无法解决问题，请尝试在 Vue3 和 Vite 的官方文档中查找相关信息，或者在社区中寻求帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值