vue项目 style标签引入 less sass
在我们编
写vue代码时,有时候需要
写入大量的
css样式,会有一些不方便的情况
1.有时候定义变量可能会和class名称重复,根据字符查找变量时会查出多个,不便于查找
2.
css会占用大量的行数 页面的dom和js代码并不是很多 整个页面却有几千行甚至上万
我们可以将
css代码单独放在静态目录下存放,在style标签中引入
根据项目所用语言定义文件后缀, .
css .less .s
css 这里定义的是less后缀
在需要的目录下 style标签下进行引入
Bootstrap-4-实用程序
Bootstrap 3或LESS和CSS中任何其他项目的Bootstrap 4实用程序类。 这些是非常有用的帮助程序类，包括常见的以及响应性的float，space和text-align类，您可以轻松地将其包含在任何项目中。
只需下载该项目并将CSS文件包含在您的项目中即可。 这里没什么好看的！ 您还可以在项目中包含LESS文件，并在其之上添加自己的自定义实用程序类。
将样式表包含在文档的<head>
< link rel =" stylesheet " href =" bootstrap-4-utilities.min.css " >
</ head >
接下来，根据需要开始添加类。
实用程序类分为Float ， Text Align和Spacing ，每个类别分为两个部分Common和Responsive 。
对于响应实用程序类，断点与Bootstrap 3中的断点相同，如下所示：
xs (<768px) （此断点缩写未在类中使用，因为它适用于从xs到xl的所有断点）
sm (≥768px)
在Firefox <22中，您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。
* Legacy Firefox implementation treats all flex containers
* as inline-block elements.
@-moz-document url-prefix() {
# selector
文章目录前言一、Less基本介绍二、安装、编译三、Less定义变量四、Less嵌套五、Less运算
因为css是标记语言，无法定义变量、进行计算等，会有很多冗余代码，而less、scss等正是改变了这一缺点。
一、Less基本介绍
less是一门css的扩展语言，是css的预处理语言，他可以编写样式的同时使用变量、进行计算，减少冗余代码，提高开发效率
二、安装、编译
下载 npm install less -g
查看less版本 lessc -v
此时电脑中安装好less，可以使用less编写样式了。
v-html是Vue.js的一个指令，用于在页面中渲染一段纯HTML代码。然而，使用v-html会导致所有样式失效。为了解决这个问题，有两种方法可以应用样式到v-html元素上。
第一种方法是使用scoped样式，在style标签中添加 scoped 属性，并使用适当的选择器和样式来定义v-html元素的样式。例如，可以使用以下方式来定义表格的样式：
```html
<style scoped lang="less">
.content-html{
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
table td, table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
table th {
border-bottom: 2px solid #ccc;
text-align: center;
</style>
然而，这种方式在v-html中应用样式时会失效。因此，我们可以使用第二种方法，即使用/deep/关键字或>>>操作符（在Vue 2.2.0之前）来穿透父级样式，实现对v-html元素的样式应用。例如：
```html
<style scoped lang="less">
.content-html{
/* table 样式 */
/deep/ table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
/deep/ table td, table th {
border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;
padding: 3px 5px;
/deep/ table th {
border-bottom: 2px solid #ccc;
text-align: center;
</style>
这样，样式就可以正确地应用到v-html元素上了。
但是需要注意的是，使用v-html加载的富文本相当于直接写在元素上的style，这会导致样式优先级的问题。如果遇到文字大小的样式没有生效的问题，可以使用!important来提高样式的优先级，或者使用transform: scale()来调整样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [【vue】关于v-html内容中css样式失效解决办法](https://blog.csdn.net/coralime/article/details/114288686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [1.使用v-html加载富文本，css样式不起作用](https://blog.csdn.net/qq_35491739/article/details/122475649)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
