当前位置: 首页 > 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;还有一些鲜为人知的职业同样重要。…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...