运用demo: 一个header.vue组件, 组件内,改变了其他组件样式(/deep/方式), 背景色,字体颜色,
现在想通过父组件传值的方式统一管理,改变样式,
<!-- demo -->
<template>
<!-- 父组件传参过来 根据css3 var函数 声明变量 -->
<div class="pack" :style="{ '--bkColor': bkColor, '--fontColor': fontColor }">
<el-card class="box-card">
"列表内容 "
</el-card>
</template>
<script>
export default {
name: "",
props: {
bkColor: {
//背景色
type: String,
default: "transparent",
fontColor: {
//字体颜色
type: String,
default: "#ffffff",
data() {
return {};
</script>
<style scoped lang="scss">
.pack {
/deep/ .el-card {
// style上声明的变量
background: var(--color);
.box-card {
// style上声明的变量
color: var(--fontColor);
</style>
Vue3在css中使用js变量及其原理解读
首先css中是有变量的，可以像js变量一样在style中使用，然后Vue3支持将js中的变量传入style中，相当于在css中创建了同名的变量，值绑定到js变量上，后续会跟着js中的变量一同响应式变化。
CSS变量介绍
CSS变量的声明方式：
--color: red;
CSS变量的使用方式：
color: var(--color);
body {
--color: red;
color:
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
scss支持
为了使用scss，我们需要先安装相关的node包：
npm install --save style-loader sass-loader node-sass file-loader
安装好之后，为了可以在.vue和.scss中使用，需要在webpack.config.js中配置对应的解析器：
var webpack = require(
https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean
含义如下：
!default 在 Bootstrap Sass 中经常使用。 它类似于反向 !important。 所有 Bootstrap 变量都使用 !default 设置，以允许开发人员进一步自定义引导程序。 使用 !default sass
什么是css自定义属性
官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.
CSS变量和预处理器中的变量有什么不同？
CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。
我们可以在 样式表中 ，在 内联样式 中，在 SVG的标签 中直接使用CSS变量，甚至可以在 运行时 用JavaScript直接修改它。但是我们是 无法 对预处理器中的变量做上面这些操作的.
当然,可以同时使用CSS变
文章目录一、参考二、问题描述三、第一个方案——动态 style 标签第一个例子第二个例子四、第二个方案——CSS 变量快速入门 CSS 变量 ，var() 函数Vue 修改CSS变量案例五、总结
js修改style样式_Vue 动态样式黑魔法（超实用）
CSS 变量教程 阮一峰
二、问题描述
工作中使用 elementUI 的scrollbar 组件，例如 <el-scrollbar wrap-class="demo-scrollbar-wrap-2">，只能让 wrap-cl
来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !defaul...
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。
傻瓜式引用
在每个用到全局变量的组件都引入该全局样式文件
@import 'path/fileName.scss'
但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。
sass-r
大量的vue单文件组件会用到这些变量，每个组件都引人一次又太麻烦。全局引入是个不错的方法，于是，在main.js 中引入variable.styl文件，但是你会发现，并不起作用。
在查阅了vue cli官方文档后发现，有官方支持的方法。
1、给sass样式传入共享的全局变量
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass
