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

news2024/9/19 10:45:55

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/565809.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Android学习】Android studio环境搭建-解决下载gradle慢加载mainfest.xml慢的问题

转载&#xff1a;https://blog.csdn.net/qq_31881469/article/details/78646406/ 目录 1、解决网络连接问题 &#xff08;1&#xff09;问题描述 &#xff08;2&#xff09;方法步骤 2、解决内存吃紧问题 &#xff08;1&#xff09;问题描述 &#xff08;2&#xff…

chatgpt赋能python:Python的SEO优化

Python的SEO优化 介绍 Python是一种高级编程语言&#xff0c;旨在提高开发人员的生产力和代码可读性。在过去的10年中&#xff0c;Python已迅速成为最受欢迎的编程语言之一&#xff0c;具有广泛的应用领域&#xff0c;包括数据科学、机器学习、人工智能、网络编程和Web开发。…

chatgpt赋能python:Python集合的差集

Python集合的差集 Python是一门强大的动态语言&#xff0c;不仅应用于广泛的领域&#xff0c;而且它还拥有非常丰富的数据结构。Python中的集合(set)是一种无序、不重复元素的结构&#xff0c;常用于去重&#xff0c;检查成员等操作。 在Python中&#xff0c;可以使用"-…

Java面试知识点(全)-分布式算法- ZAB算法

Java面试知识点(全) 导航&#xff1a; https://nanxiang.blog.csdn.net/article/details/130640392 注&#xff1a;随时更新 研究zookeeper时&#xff0c;必须要了解zk的选举和集群间个副本间的数据一致性。 什么是 ZAB 协议&#xff1f; ZAB 协议介绍 ZAB 协议全称&#xf…

docker安装mysql8.0.33

1 从docker仓库中拉去mysql 8.0 docker pull mysql:8.0如果使用 docker pull mysql 默认拉取的是最新版本的mysql 上面我拉去的是8.0的版本&#xff0c;最后拉取过来的是8.0.33 如果有想要指定的版本&#xff0c;可以直接写指定版本&#xff0c;如&#xff1a; docker pull my…

Python速查表;腾讯大佬的AIGC设计应用汇总;这个世界需要10亿开发者;67个最常用AI工具清单 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 『一份必收藏的 Python 3 速查表』可运行代码中文注释 随着AIGC浪潮的兴起&#xff0c;越来越多小伙伴尝试着使用 GPT 类工具开发小程…

如何通过提高技能来克服 IT 技能差距

有时招聘很容易&#xff0c;你发布了职位描述&#xff0c;然后突然被热切的、合格的候选人淹没了。 特别是对于技术职位&#xff0c;招聘前景从未如此黯淡。谈论信息技术 (IT) 人才缺口是不可避免的&#xff0c;并且有充分的理由&#xff1a;根据研究&#xff0c;73% 的企业领…

chatgpt赋能python:Python%2:优化你的代码

Python %2&#xff1a;优化你的代码 Python是一门强大的编程语言&#xff0c;被广泛应用于数据分析、机器学习、Web开发等领域。在Python的语法中&#xff0c;有一个运算符%用于格式化字符串&#xff0c;在本篇文章中&#xff0c;我们将聚焦于%2的应用&#xff0c;以帮助读者优…

三层交换机

管理vlan 远程连接一个二层交换机&#xff0c;由于二层交换机不能配IP地址&#xff0c;所以我们使用SVI交换虚拟接口配置一个IP地址来远程连接二层交换机。svi接口可以配置ip地址&#xff0c;出厂存在mac地址&#xff0c;用于远程登陆管理该设备&#xff0c;该接口默认在vlan1…

如何在华为OD机试中获得满分?Java实现【最多提取子串数目】一文详解!

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 华为OD机试攻略&#xff1a;Java实现并讲解2022&2023真题 文章目录 1. 题目描述2. 输入描述…

配电室智能监控系统设计及实现分析

摘 要&#xff1a;配电室作为电网正常运行中的基础性设施&#xff0c;在信息化建设中处于信息交换管理的核心位置&#xff0c;这就要求配电室内所有设备须时时刻刻正常运转&#xff0c;一旦某台设备出现故障&#xff0c;对数据传输、存储及系统运行构成威胁&#xff0c;就会影…

代码随想录算法训练营第五十一天 | 买卖股票3

309.最佳买卖股票时机含冷冻期 文档讲解&#xff1a;代码随想录 (programmercarl.com) 视频讲解&#xff1a;动态规划来决定最佳时机&#xff0c;这次有冷冻期&#xff01;| LeetCode&#xff1a;309.买卖股票的最佳时机含冷冻期_哔哩哔哩_bilibili 状态&#xff1a;dp定义看的…

Microsoft Office 2019安装

哈喽&#xff0c;大家好。今天一起学习的是office2019的安装&#xff0c;有兴趣的小伙伴也可以来一起试试手。 一、测试演示参数 演示操作系统&#xff1a;Windows 10 支持Win11安装&#xff0c;不支持Win7、XP系统 系统类型&#xff1a;64位 演示版本&#xff1a;cn_office_…

【C++】——动态内存管理

目录 &#x1f31e;导读 &#x1f314;C/C内存分布 &#x1f314;C内存管理方式 &#x1f317;new/delete操作内置类型 &#x1f317;new和delete的使用方法 &#x1f314;operator new与operator delete函数 &#x1f314;new和delete的实现原理 &#x1f317;内置…

Python篇——数据结构与算法(第三部分:归并排序;快速、归并、堆排序小结;深拷贝和浅拷贝区别)

1、归并排序——归并 假设现在的列表分为两段有序&#xff0c;如何将其合成为一个有序列表这种操作称为一次归并 归并过程描述&#xff1a;&#xff08;前提是两段列表分别有序&#xff09; 两段有序列表进行对比&#xff0c;1和2进行对比选出最小的数&#xff0c;1出列&#x…

chatgpt赋能python:Python中的soup.find()方法详解

Python中的soup.find()方法详解 Python语言的简洁、易读性和快速开发的特点已经成为了程序员们的首选语言。其中&#xff0c;BeautifulSoup库作为一个非常好用的库&#xff0c;可以用于解析HTML/XML文档&#xff0c;提取出需要的信息。soup.find()方法是BeautifulSoup库中的一…

chatgpt赋能python:PythonWord目录的介绍

Python Word 目录的介绍 Python 是一种高级编程语言&#xff0c;已经成为世界上最流行的程序设计语言之一。在 Python 中&#xff0c;我们可以使用一些库和模块来完成各种任务&#xff0c;例如文本处理和文件操作。 一个很常见的文本处理任务就是生成和编辑 Microsoft Word 文…

day1 - OpenCV安装与环境配置

本期我们介绍 OpenCV 的背景知识以及如何安装 OpenCV 。 完成本期内容&#xff0c;你可以&#xff1a; 了解 OpenCV 的背景知识掌握安装 OpenCV 及其拓展库 若要运行案例代码&#xff0c;你需要有&#xff1a; 操作系统&#xff1a;Ubuntu 16 以上 或者 Windows10 工具软件…

chatgpt赋能python:PythonTables:为你的数据处理带来更高效的解决方案

Python Tables&#xff1a;为你的数据处理带来更高效的解决方案 Python是一种功能强大且易于使用的编程语言&#xff0c;可以用于各种用途。对于数据处理和分析来说&#xff0c;Python是一个非常受欢迎的选择&#xff0c;因为它有许多强大的库和工具可以使用。其中一个很有用的…

pkcs8-rfc5958

非对称密钥包摘要 本文档定义了私钥信息的语法及其内容类型。 私钥信息包括指定公钥算法的私钥和一组属性。 RFC 5652 中定义的加密消息语法 (CMS) 可用于对非对称密钥格式内容类型进行数字签名、摘要、验证或加密。 本文档废弃了 RFC 5208。 本备忘录的状态 这是一份 Internet…