当前位置: 首页 > news >正文

解决:在单项目组件里面引入 base.scss/ base.less 等的外部文件不成功的问题

1、问题展示:

其一、问题描述:
在单文件组件里面使用封装在 base.scssbase.less 里面的样式用法一直不成功;

其二、代码:
// 虽然已经标明了用的是 scss 的语法,但是页面调用 .scss 里的 style 样式还是不成功


<style rel="stylesheet/scss" lang="scss" scoped>
</style>

其三、页面展示:

// 页面没有样式效果
在这里插入图片描述

2、问题分析:

其一、写 .scss 样式的文件没有在 main.js 中引用;

其二、或没有在 main.js 引用的 .scss 文件中写相关样式(即:其实是一码事);

3、解决过程:

其一、(以 sass(scss) 为例)首先看下项目中是否引入了 sasssass-loader,若未引入,那么是肯定不能使用 .scss 文件的,那么样式肯定不生效;

在这里插入图片描述

其二、不存在 其一 的情况下main.js 中引入的 .scss 文件里面写相关的样式;

其三、不存在 其一 的情况下 或将写样式的 .scss 文件在 main.js 里面再引入一下;

在这里插入图片描述
在这里插入图片描述
其四、页面显示为:
// 表示写的样式已生效(注意:scss/less 语言都是这样操作);
在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

相关文章:

解决:在单项目组件里面引入 base.scss/ base.less 等的外部文件不成功的问题

1、问题展示&#xff1a; 其一、问题描述&#xff1a; 在单文件组件里面使用封装在 base.scss 或 base.less 里面的样式用法一直不成功&#xff1b; 其二、代码&#xff1a; // 虽然已经标明了用的是 scss 的语法&#xff0c;但是页面调用 .scss 里的 style 样式还是不成功&a…...

论文分享 | WSBERT:Weighted Sampling for Masked Language Modeling

本次分享阿里巴巴达摩院语音实验室、新南威尔士大学与香港科技大学&#xff08;广州&#xff09;等在ICASSP2023会议发表的论文《Weighted Sampling for Masked Language Modeling》。该论文主要提出了两种简单有效的加权采样策略&#xff0c;来缓解掩码语言模型&#xff08;ML…...

java 在线音乐网站系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

一、源码特点 java 在线音乐网站系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助struts2开发技术&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mys…...

软件测试基础教程学习1

文章目录 软件测试概述1.1 什么是软件测试1.2 软件测试的目的1.3 对软件测试的理解1.4 软件测试的原则1.5 测试人员的职责1.6 测试人员的素质要求 软件测试概述 1.1 什么是软件测试 1&#xff09;软件测试要发现软件的错误。 2&#xff09;软件测试最终要以软件满足用户需求为…...

浅谈一下@Async和SpringSecurityContext可能会遇到的问题和解决方案

Async和SpringSecurityContext 场景回溯 在执行一个用时较长的批量插入业务的时候,我尝试使用Async异步对业务进行优化,但是却给我报了空指针的错误,定位之后发现 此处我是基于SpringSecurity来获取用户的 是currentUserService获取到的当前登陆用户为空导致的,但是当前确实是…...

VUE常见面试题

1.为什么要使用Vue&#xff1f; 答&#xff1a;Vue是一款优秀的前端框架&#xff0c;它可以帮助我们快速构建高效、可复用、易维护的Web应用程序&#xff0c;并提供了丰富的API和生态系统。 2. Vue有哪些生命周期钩子函数&#xff1f; 答&#xff1a;Vue有8个生命周期钩子函…...

字符串匹配算法--KMP算法--BM算法

该算法解决的是字符串匹配问题&#xff0c;即查看字符串中是否含有完整的匹配字符串。如在java的string的contains方法匹配问题最简单的就是暴力破解了。在java的contains也是这么实现的&#xff0c;效率是低一点的。如果想要更快的速度可以自己写KMP算法。 代码实现体验 Knut…...

swagger的简单介绍

目录 swagger是什么&#xff1f; swagger有什么用&#xff1f; Swagger包含的工具集&#xff1a; swagger的使用步骤&#xff1a; swagger的相关注解&#xff1a; Docket的源码 了解swagger的作用和概念了解前后端分离在SpringBoot中集成Swagger swagger是什么&#xff1f;…...

HNU-电路与电子学-小班3

第三次讨论 1 、直接用晶体管而不是逻辑门实现异或门&#xff0c;并解释这个电路是如何工作的。 &#xff08;6个 MOS 管构成&#xff09; 2 、通信双方约定采用 7 位海明码进行数据传输。请为发送方设计海明码校验位 生成电路&#xff0c;采用功能块和逻辑门为接收方设计海…...

[机缘参悟-98] :层次不同、维度不同、视角不同、结论不同

目录 全局VS具备&#xff0c; 总体V部分 认知的六个认知层次&#xff1a; 认知的六个立体化维度&#xff1a; 0、维空间&#xff0c;点思维 1、一维空间&#xff0c;直线思维 2、二维空间&#xff0c;平面思维 3、三维空间&#xff1a;立体思维。 4、四维空间&#xff…...

chatgpt-web发布之docker打包流程

docker打包流程 1、使用docker前置准备&#xff1a; 电脑下载docker桌面版&#xff0c;以及开启虚拟机步骤&#xff1a;https://blog.csdn.net/qq_34905631/article/details/126573826下载docker桌面版 &#xff1a;https://docs.docker.com/desktop/install/windows-install…...

动态优化会议地点

前言 在现在快节奏的工作节奏下&#xff0c;大家的活动范围越来越广&#xff0c;但是出行成本也相应提高。在集体会面的时候&#xff0c;如何选择合适的地点成为了一个棘手的问题。本文将介绍如何通过动态优化选择会议地点&#xff0c;以达到平均交通成本最低的目标。 动态优化…...

Golang每日一练(leetDay0076) 第k大元素、组合总和III

目录 215. 数组中的第K个最大元素 Kth-largest-element-in-an-array &#x1f31f;&#x1f31f; 216. 组合总和 III Combination Sum iii &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日…...

可节省60% MCU开发成本的NV080D-S8,单片机语音芯片在恒温碗上的应用

社会在不断进步&#xff0c;科技在不断发展&#xff0c;如今的恒温碗不仅带有温度显示功能&#xff0c;更附带有语音播报&#xff0c;能更好地知晓当前饭菜&#xff0c;变凉或过烫的情况&#xff0c;有效避免伤害宝宝脆弱的肠胃&#xff1b; 广州九芯电子推出了一款&#xff0c…...

Java并发常见面试题

参考:javauide、程序员大斌、面试宝典 1.并发与并行的区别 并发:两个及两个以上的作业在同一 时间段 内执行。并行:两个及两个以上的作业在同一 时刻 执行。2.同步和异步的区别 同步:发出一个调用之后,在没有得到结果之前, 该调用就不可以返回,一直等待。异步:调用在发…...

基于vue3+pinia2仿ChatGPT聊天实例|vite4.x仿chatgpt界面

使用vue3pinia2开发仿制chatgpt界面聊天实例Vue3-Chatgpt 基于Vue3.xPinia2VueRouterVue3-Markdown等技术构建仿ChatGPT网页端聊天程序。支持经典分栏界面布局、light/dark模式、全屏半屏显示、Markdown语法解析、侧边栏隐藏等功能。 技术框架 编辑工具&#xff1a;Cursor框架…...

JDK动态代理和CGLIB动态代理

JDK动态代理和CGLIB动态代理 JDK动态代理和CGLIB动态代理 JDK动态代理和CGLIB动态代理 ① JDK动态代理只提供接口的代理&#xff0c;不支持类的代理&#xff0c;要求被代理类实现接口。JDK动态代理的核心是InvocationHandler接口和Proxy类&#xff0c;在获取代理对象时&#x…...

Jetpack Hilt 框架的基本使用

什么是 Hilt&#xff1f; Hilt 是一个功能强大、用法简单的依赖注入框架&#xff0c;于 2020 年加入到 Jetpack 家族中。它是 Android 团队联系了 Dagger2 团队&#xff0c;一起开发出来的一个专门面向 Android 的依赖注入框架。相比于 Dagger2&#xff0c;Hilt 最明显的特征就…...

exec()在不同namespace执行结果的区别

记录一个很tricky的问题&#xff0c;下面这段code在执行func1时会出现NameError: name List is not defined&#xff0c;但执行func2时一切正常。 import typescontent """ from typing import Listclass GeneratedData:qna: List"""def func1…...

人工智能革命中的22个隐藏职业:推动科技行业的变革

作者 | Manas Sadangi 随着人工智能技术的不断发展&#xff0c;它正在创造一系列前所未有的就业机会。虽然数据科学家、机器学习工程师和人工智能研究人员等传统的人工智能角色得到了广泛认可&#xff0c;但在推动科技行业变革方面&#xff0c;还有一些鲜为人知的职业同样重要。…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...