vue中CSS

最新推荐文章于 2024-06-19 21:36:07 发布

喵_美

最新推荐文章于 2024-06-19 21:36:07 发布

阅读量795

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_34708564/article/details/115009360

版权

17 篇文章

订阅专栏

使用预处理器

如果创建项目时没有选择需要的预处理器（Sass/Less/Stylus），则需手动安装相应loader

	# Sass
	npm install -D sass-loader node-sass
	# Less
	npm install -D less-loader less
	# Stylus
	npm install -D stylus-loader stylus

例：

<style scoped lang="scss">
 $color: #42b983;
  a {
    color: $color;
 }
</style>

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<style scoped>
.red {
 color: red;
}
</style>

其原理是通过使用 PostCSS 来实现以下转换：

<template>
	<div class="red" data-v-f3f3eg9>hi</div>
</template>
<style>
	.red[data-v-f3f3eg9] {
	color: red;
	}
</style>

深度作用选择器：使用 >>> 操作符可以使 scoped 样式中的一个选择器能够作用得“更深”。一般用于在使用第三方库时，不方便直接修改源码，使用 >>>穿透过去修改。
例如影响子组件：

<style scoped>
#app >>> a {
 color: red
}
</style>

Sass 之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之

<style scoped lang="scss">
#app {
/deep/ a {
 color: rgb(196, 50, 140)
}
::v-deep a {
 color: rgb(196, 50, 140)
}
}
</style>

CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。 vue-loader 提供了与 CSS Modules 的一流集成，可以作为模拟 scoped CSS 的替代方案，项目规模庞大后建议使用。
步骤：
（1）添加module

	<style module lang="scss">
	.red {
	color: #f00;
	}
	.bold {
	font-weight: bold;
	}
	</style>

（2）访问
通过$style.xx访问

<a :class="$style.red">awesome-vue</a>
<a :class="{[$style.red]:isRed}">awesome-vue</a>
<a :class="[$style.red, $style.bold]">awesome-vue</a>

JS中访问

<script>
export default {
created () {
 // -> "red_1VyoJ-uZ"
 // 一个基于文件名和类名生成的标识符
 console.log(this.$style.red)  
}
}
</script>