vue3 vite scss全局变量同时在style和js文件中使用时发生的错误解决

最新推荐文章于 2024-08-08 23:04:40 发布
最新推荐文章于 2024-08-08 23:04:40 发布
阅读量5.5k 收藏 1
点赞数 8
分类专栏： vue3 文章标签： javascript scss 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hp9999/article/details/126338799
版权

先在vite.config.js文件中配置预载入scss文件

在这里插入图片描述
然后在脚本中使用
在这里插入图片描述
这时编译将会报Error: Module loop: this module is already being loaded.
在这里插入图片描述
此时在style中使用正常，在js文件中就不能用了。
其实很简单，既然在style中能正常使用，那么。。。
只要新建个scss文件里引用全局变量文件再导出，在js中导入新建的scss文件就行了
在这里插入图片描述
在这里插入图片描述
成功
在这里插入图片描述

hp9999
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
10-14
以上就是在vue-cli3.0中使用预处理器配置全局变量的详细步骤和补充知识。这些知识点对于想要提升前端开发效率、优化代码结构的开发者来说是非常有价值的。希望这些信息能够帮助到大家，并且得到大家的支持和认可。
VUE-shop商城源码
05-17
6. ** Mock数据**：在开发过程中，Vue-shop可能使用Mock.js来模拟后端接口，方便前端开发人员进行功能验证和测试，无需依赖真实后端服务。 7. ** CSS预处理器（如Sass/Scss）**：Vue-shop可能采用了CSS预处理器来...
【vue踩坑】：SassError: This file is already being loaded
TanMengyi的博客
11-23 1424
所以就是我在vue.config.js全局配置了，就不用再单独引入咯…根据提示，因为是说我已经全局引入变量了，不用在文件里单独引入了。
Syntax Error: SassError: This file is already being loaded. 这个错误。原因是将这个scss文件重复引入了, 修改如下：
weixin_42777161的博客
01-19 1244
【代码】Syntax Error: SassError: This file is already being loaded. 这个错误。
解决 vite 中报错SassError: This file is already being loaded
很久很久以前的的博客
11-07 2357
解决 SassError: This file is already being loaded
模块的循环加载问题
百晓子木
09-12 501
对于模块加载的问题的话：    有时候会出现一种就是a模块依赖于b模块，然而b模块又依赖于a模块，这样在模块加载的时候就出现了一种模块间的循环加载的问题   模块加载在CommonJS中会存在缓存问题：若出现模块加载的会，会先加载模块，然后等要用的时候直接去缓存中取   而ES6的模块加载不同：ES6的模块加载相当于是实时加载，当需要用到模块里面的数据的时候才会去加载模块，没有缓存问题...
挖坑记录：vite使用sass 报错：[plugin:vite:css] expected “；“.
北柒南笙
10-27 1万+
vite 使用 sass 报错
21.（vue3.x+vite）使用scss.rar
11-15
在 `src/assets/styles/` 目录下创建 `_variables.scss` 和 `_mixins.scss` 文件，分别定义全局变量和混合。例如： ```scss // _variables.scss $primary-color: #007bff; $secondary-color: #6c757d; // _mixins....
vue如何引入sass全局变量
12-12
在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者...
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）.rar
09-22
在Vue 3.x和Vite的环境中，与Element Plus组件库配合使用时，有时我们需要根据项目需求自定义组件样式，例如修改`el-table`表格组件的样式。Element Plus是基于Vue 3的UI组件库，提供了丰富的组件供开发者使用。在本...
vue3解决：[vite] Internal server error: Preprocessor dependency “sass“ not found. Did you install it?
热门推荐
狮子座的男孩
06-25 1万+
【代码】vue3解决：[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
element-plus 更换主题色
小秀的博客
02-05 1035
由于跟着官方文档可能出现报错，于是写一份避坑指南。
ts 使用sass变量提示在string上不存在这个属性
qq_15006083的博客
02-18 3111
ts 使用sass变量提示在string上不存在这个属性** 解决办法：定义声明模块variables.scss.d.ts，如下图： 这样就解决了问题 如果配置了全局的sass变量，还会引发一个问题，提示This file is already being loaded. 解决办法：删除variables.scss.d.ts文件和variables.scss中的导出代码，和新建一个导出sass变量的scss文件(export.scss)和对应的声明文件(export.scss.d.ts)，expor
[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案
11-13 9177
在使用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 得知需要通过..
开发过程遇到的小问题
D_JOY_W的博客
06-16 384
记录开发遇到的小问题
apache [warn] module XXXX_module is already loaded, skipping
知跬步，至千里
04-25 7906
今天在重启Apache的时候碰到这个Warn，在这里记录一下： 首先发现如下Warn： # service apache2 restart [Thu Apr 25 09:39:06 2019] [warn] module headers_module is already loaded, skipping Syntax OK Shutting down httpd2 (waiting for a...
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 467
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
vite+ts配置scss全局变量
11-23
以下是vite+ts配置scss全局变量的步骤： 1.安装依赖 ```shell npm install -D sass vite-plugin-style-import ``` 2.在vite.config.ts中配置插件 ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default defineConfig({ plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], }); ``` 3.在src目录下创建一个styles文件夹，并在其中创建一个variables.scss文件，用于定义全局变量 ```scss $primary-color: #1890ff; ``` 4.在main.ts中引入variables.scss文件 ```typescript import './styles/variables.scss'; ``` 5.在组件中使用全局变量 ```html <template> <div class="container"> <h1 style="color: $primary-color">Hello World</h1> </div> </template> <style lang="scss"> .container { background-color: $primary-color; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值