vue 打包时报错 Syntax Error: SassError: Undefined variable. ╷ 314 $sideBarWidth或者 @import “@/variables.

最新推荐文章于 2024-02-27 10:18:02 发布
最新推荐文章于 2024-02-27 10:18:02 发布
阅读量784 收藏 10
点赞数 7
文章标签： vue.js npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiweb_kai/article/details/136248210
版权

vue打包时报错     $sideBarWidth或者 @import "@/variables.

产生原因可能是因为sass-loader 版本过高，config 配置发生变化

解决方法：

配置vue.config.js文件，使得全局都能使用scss变量，但是node版本对应的node-sass版本也不同,请选择对应的node-sass版本

sass-loader v8
该 data 选项已重命名为 prependData 选项

sass-loader v9.0
prependData 选项已被删除，取而代之的是 additionalData 选项

node-sass对应的sass-loader版本也不同

aiweb_kai
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
10-17
主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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 官网默认打开
Syntax Error: SassError: Undefined variable: “$color-primary“.
yangbinling的博客
12-06 3908
引入‘$color-primary’后报错修改vue.config.js代码即可原代码：
SassError: Undefined variable: “$u-border-color“问题解决
qq_45366264的博客
08-09 3621
才正常解决了上述的问题。具体解决方案如下所示。尝试了下面这篇博客的方法。
SassError: Undefined variable: “$u-type-primary“.
dandanmei0513的博客
05-24 2450
在引入uview-ui时报错：SassError: Undefined variable: “$u-type-primary“.根据官网三步走下载uview，
Vue引入scss文件报错 Syntax Error: SassError: Undefined variable.23 │ $b-custom-radio-indicator-border-rad
手撕鸡翅的博客
08-28 8938
错误如下：scss编译错误 error in ./src/assets/scss/index.scss Syntax Error: SassError: Undefined variable. ╷ 23 │ $b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default; │ ^^^^^
使用uview-ui遇见SassError: Undefined variable
zhaohonghaofly的博客
03-03 8475
uniapp 中出现 Undefined variable $u-type-primary-light 问题
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的，但引入 /src 和 /static 的文件是...
npm run dev 报错 ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in
01-07
Alternatively, run 'webpack(-cli) --help' for ...ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\HBuilder\Vue\day07\test1' npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! test
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
nuxt sass全局变量也就是公共 scss 解决方案 案例
11-02
主要针对 nuxt引入 sass 和 其中一个scss文件抽出来作为公共变量存储文件的解决方案，因为官方案例少，目前用的人少，所以贴出来分享下
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
热门推荐
qq_40532145的博客
09-09 2万+
报错：Syntax Error: SassError: Undefined variable. 我一开始的引入方式是这样的： 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果 可能还会有奇奇怪怪的潜在问题，建议使用方法二。 · 解决方法二 配置vue.config.js文件，使得全局都能使用sc...
小程序Vue3.0使用UView3.0报错[plugin:vite:css] Undefined variable.$u-main-color；
最新发布
m0_55464684的博客
02-27 1012
如果您的项目是由HBuilder X创建的，请在HX菜单的 工具->插件安装中找到 "dart-sass编译" 和 "scss/sass编译" 插件进行安装，安装完后重启下HBX。如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。【使用原因】发现uni-ui的表格居然是根据一行一行的表格具体内容确认宽度的对齐不了，换其他的组件库试试。【解决】下载插件导入HbuilderX后，不能直接使用，需要安装官网链接进行一些安装配置。
vue3+vite+ts：报错 [sass] undefined variable
qq_50386946的博客
07-12 2939
2、不要在 【main.ts】中全局引入，直接在【vite.config.ts】中处理。1、安装 sass-loader ：npm i sass-loader@10 -D。
[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案
11-13 8962
在使用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 得知需要通过..
Sass: 变量名中使用字符串模板
高先生的猫
12-23 1369
问题 使用 Sass 的时候，我们可能在某些场景下使用到字符串模板，如： @mixin set-border($side) { border-#{$side}: solid 1px #000; } .header { @include set-border("top"); } 这些会编译成： .header { border-top: solid 1px #000; } 这里主要是想在使用变量的同时去渲染不一样的 CSS 属性。但是现在 Sass 还不允许直接在..
Vue打包项目报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 的解决方法
weixin_44934104的博客
05-13 9247
还好不容易工作进入到了打包环节，却又开始报错，报错文件是一个JS文件： JS文件打开以后是这样的 问题：应该是文件引入的问题，开始找解决方法 在网上找了一些浏览量很高的方法，试过的如下： 1、 添加externals的配置 2、 把assets文件夹下的内容放到public下 3、将引入Router的模式改为“hash” 试过了之后都无效，非常的头疼（也有可能是我设置的方式也存在问题） 最终找到了一篇文章解决，使用一行配置搞定，在vue.config.js文件中加入： //使用路径 Uncaught
报错 Error: Unknown variable dynamic import: ../views/layout/DefaultView.vue
07-14
如果你在使用动态导入 `import()` 的过程中遇到了 "Error: Unknown variable dynamic import" 错误，这可能是因为你的代码在一个不支持动态导入的环境中执行。 动态导入（dynamic import）是 ECMAScript 的一个新特性，它允许在运行时动态地导入模块。然而，并非所有的 JavaScript 环境都支持这个特性。在某些环境中，特别是在旧版本的浏览器和一些 Node.js 运行时中，动态导入可能不被支持。 以下是一些常见的情况，其中可能会出现 "Error: Unknown variable dynamic import" 错误： 1. 浏览器环境：在旧版本的浏览器中，如 IE11 或一些移动端浏览器中，可能不支持动态导入。你可以检查浏览器的兼容性以确认是否支持该特性。 2. Node.js 环境：在某些版本的 Node.js 中，默认情况下可能不支持动态导入。你可以通过在 Node.js 运行时添加 `--experimental-modules` 标志来启用对动态导入的支持。例如：`node --experimental-modules your-script.js`。 如果你需要在不支持动态导入的环境中使用模块导入，你可以考虑使用其他方式，如静态导入 `import` 或建立构建工具来处理模块的导入。具体的解决方案取决于你的项目和运行环境。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值