vue3项目使用scss报错相关处理

最新推荐文章于 2025-09-04 11:12:46 发布
原创 最新推荐文章于 2025-09-04 11:12:46 发布 · 716 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#scss #前端 #css

1、如果控制台报错如下：

解决办法如下：在vite.config.ts 文件中 将红色框中的两行代码放开即可解决

          api: 'modern-compiler',
          silenceDeprecations: ['legacy-js-api'],

2、如果控制台报错如下：

解决办法如下：在vite.config.ts 文件中 将红色框中的  import 改为  use 即可 

additionalData: '@use "@/styles/variable.scss";'

3、如果控制台报错如下：

解决办法如下：在vite.config.ts 文件中 将红色框中加入 as * 即可 

vue项目中使用scss出错解决方法
Debug的博客
10-24 5522
vue 使用scss报错 this.getOptions is not a function 通过npm安装sass npm install node-sass npm intall sass-loader 上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致getOptions()不兼容 解决方案就是卸载sass-loader，安装低版本，命令如下 npm uninstall sass-loader //卸载 npm install sass-loader@8.0.0 //安装8.0 .
【SCSS篇】Vite+Vue3项目全局引入scss文件
前端知识分享喵
10-12 5875
Vite+Vue3项目全局引入scss文件
vite中sass警告JS API过期
03-23 469
由于是vite创建的项目，翻到Bundles部分，通过红框可以看出Vite仍然默认使用传统的API，需要通过Vite设置api为"modern"或"modern-compiler"，即可解决。在Vite创建项目中引入Sass弹出The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0。在css.preprocessorOptions部分发现sass/scss的api默认值为 "legacy"
[Modern Compiler] Introduction
Domingo_Blog
04-01 418
绪论
vue3 + vite + Element Plus项目中 SCSS 预处理器完整配置指南
最新发布
帥潔的博客
09-04 815
vue3 + vite + Element Plus项目中 SCSS 预处理器完整配置指南
VUE3+VITE 爬坑笔记
半梅芒果干的博客
03-28 374
crypto$2.getRandomValues is not a function的问题。如果加了运行还是报同样的错误，看下vite版本是多少，要保证在5.4.0及以上。①、要么这两个依赖降级到4版本后在启动就不会在报错了。②、要么升级node到18版本以上。如果找不到nvm装到哪里了，可运行。这个时候运行启动就不会报错了。我选择升级node版本。
Vue3项目require引入css文件报错：require is not defined
acheding的博客
11-12 4542
用 import 代替require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
针对vue项目中使用scss，启动时报错的解决方案
zerodiyi的博客
04-15 2272
在vue项目中的sass-loader主要是用来将sass/scss文件解析成能够被浏览器识别的css文件，而node-sass主要就是为sass-loader提供支持的一个模块，简单来说node-sass可以使sass-loader正常运行，而sass-loader在运行的时候可以将sass/scss文件解析成css文件。此时就是说node-sass的版本没问题,就是sass-loader版本和node-sass不匹配，需要需要重新下载sass-loader。这两个问题的解决方案如上所示。
详解Vue2 添加对scss的支持
12-07
引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev ...安装好之后，为了可以在.vue和.scss中使用，需要在webpack.config.js中配置对应的解析器： var webpack = require
Vue3 Scss的使用(二)
秋秋小事
04-18 565
使用混合器，scss中的条件语句，通过v-for实现一组button的不同背景色的配置，在scss中混合器与if-else条件语句一起使用，可以实现一些更复杂的页面样式。在日常的开发中，我们可能有些一能够复用的style，我们不希望重复写这些样式，此时我们可以使用Scss的混合器。，使用scss的混合器配置button样式。
vue2.x 使用vue-cli搭建项目，引用全局scss 及报错Module build failed: TypeError: this.getResolve is not a function
凌霄的博客
11-19 790
安装sass-resources-loader插件，然后新建一个var.scss cnpm install sass-resources-loader --save 例如var.scss： @charset "UTF-8"; $themeColor: #409eff; @mixin ellipsis() { overflow: hidden; text-overflow: ellips...
关于引入uview-ui @import “uview-ui/index.scss“；报错
wangxinwang996的博客
04-15 2050
在APP.vue中加上lang="scss。/*每个页面公共css */
vue3.0安装sass（scss）以及报错解决
m0_47136227的博客
09-18 3027
本篇文章主要记录了笔者安装sass的过程 1.安装ruby 首先在官网中下载 https://rubyinstaller.org/downloads/ 下载之后进行安装 在安装过程中，要记得勾选添加环境变量的选项，其他的就是一直next就可以了 安装完成之后可以在终端输入ruby -v 查看是否安装成功 2.安装sass（scss） 之后cd到项目的目录下 进行sass的安装 npm install sass-loader@7.3.1 --save-dev npm install node-sass -
Vue项目在index.html中引入css文件不生效
Ltp_Ltp的博客
04-19 3622
1、浏览器报错信息 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/static/css/bootstrap.css". 2、正常引入css文件 在config目录下的 index.js 里面说明了index.html需要引用的静态资...
解决vue3引入scss全局变量预处理失败
qq_39422370的博客
05-30 1130
允许你按模块的方式导入样式表，使得导入的内容（如变量、混合宏、函数等）默认是局部的，避免了与全局样式的冲突。它还允许你为导入的模块创建别名，从而避免了可能出现的命名冲突问题。在预处理报错问题后，当用$a引入全局变量 ，又会出现一个问题[sass] Error: Undefined variable.vite配置文件vite.config.ts在css预处理配置中 采用@use来导入全局变量配置文件。的作用是将导入的模块内容直接暴露在当前样式表的命名空间中，就可以像使用。版本中引入@use，旨在替代之前的。
04-Vue3使用SCSS
bee-code的博客
07-31 1800
引入scss ???? 目标 以变量形式编写样式。 ???? 准备 安装依赖 npm install -D sass 调整文件&目录 在 src 目录下创建 styles 文件夹，用来存放样式文件。 styles文件目录结构如下： ???? src ----???? styles --------???? common ------------???? font.scss --------???? variable ------------???? color.scss --------????
vue3 vite scss全局变量同时在style和js文件中使用时发生的错误解决
hp9999的博客
08-15 6973
vue3 vite scss sass Error: Module loop: this module is already being loaded js style
Vue3+Vite中使用SCSS
qq_54140719的博客
03-05 9789
Vue3引入SCSS的执行命令 npm i sass sass-loader --save-dev 配置全局变量，
vue开发中，scss报错this.getOptions is not a function
04-28
这个错误通常出现在使用vue-loader时，可能是因为vue-loader的版本太低导致的。可以尝试升级vue-loader的版本，或者将webpack的版本降低到4.x版本以下。 另外，还可以尝试以下解决方案： 1. 确保安装了sass-loader和node-sass依赖包。 2. 在webpack配置文件中加入如下配置： ``` module: { rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), indentedSyntax: true // optional }, }, }, ], }, ], } ``` 3. 在vue.config.js中加入如下配置： ``` module.exports = { css: { loaderOptions: { sass: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), indentedSyntax: true // optional }, }, }, }, }; ``` 希望这些方法能够帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cdlblbq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值