vue中css样式管理

发布时间：2024-12-09 15:47

前端开发：HTML/CSS/React/Vue，学会使用MDN Web Docs #生活技巧# #工作学习技巧# #编程语言学习路径#

1. Vue中scoped属性的渲染规则：

给DOM节点添加一个不重复的data属性（比如data-v-7ba5bd90）来表示他的唯一性在每个CSS选择器末尾（编译后生成的CSS）加一个当前组件的data属性选择器（如[data-v-7ba5bd90]）来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配子组件最外层标签上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性如果父组件想要改变子组件中某个标签样式可以使用>>>连接符或者/deep/来解决

<template> <button class="btn"> <span> <slot></slot> </span> </button> </template> <style scoped> .btn { color: red; } </style>  <template><div id="app"><Button class="btn-lg">click</Button> </div> </template> <script>import Button from "./components/Button";export default {name: "App",components: {Button}}; </script> <style scoped>.btn>>> span {color: green;font-weight: bold;border: 1px solid green;padding: 10px;} </style>

12345678910111213141516171819202122232425262728293031 子组件（‘button class=“btn”’） v-html中内在的标签样式不生效,原理以及解决方案同4、5

其实上述中父组件想要修改子组件的样式，在开发中其实是经常遇到的，就我个人开发项目过程中就会遇到在使用element-ui时，对element-ui封装的组件样式并不是很满意，想要修改，我用到的是个比较笨的方法，

但是不论上面的使用>>>连接符或者/deep/来解决，还是我的笨方法其实都破坏了已封装好的组件中的样式，但这也失去了组件封装的效果。再次回到以前CSS中令人头痛的问题：CSS作用域。

2. Vue中使用CSS Modules：

这里只是简单说一下，因为还没有使用过CSS Modules接触scope较多，再者个人觉得CSS Modules的使用太过繁琐，而且scope就够解决Css样式管理了，以上只是个人的一点见解，如果下面有不对的地方请多指教！
1. 基本使用方式

在style标签中添加module属性，表示打开CSS-loader的模块模式

在模板中使用动态类绑定:class，并在类名前面加上’$style.’

<template> <button :class="$style.btn">{{msg}}</button> </template> 1

效果如下所示：:class="$style.btn"会被编译成为.Button_btn_3ykLd这个类名，并且样式的选择器也自动发生了相应的变化。
在这里插入图片描述
需要注意的点：

如果类名包含中划线，或者类名是驼峰式命名，则使用中括号语法

<h4 :class="$style['header-tit']">类别推荐</h4> 1 也可以使用数组或对象语法

<p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red, $style.bold]"> Red and bold </p> 123456 更复杂的对象语法

<ul 　　　 :class="{ [$style.panelBox]:true, [$style.transitionByPanelBox]:needTransition }"> </ul> 123456

相当不好用啊，scss不能用，二层嵌套样式也不能选择生效，

<template><div class="warp"><div :class="$style['aa']">123<div :class="$style['bb']">ffff</div></div><div :class="$style['bb']">ddddddd</div></div> </template> <script> </script> //错误示例 <style module lang="scss">.aa{background-color: #00B43C;.bb{border: 1px solid #66512C;}}/*.aa*/ </style> 正确示例： <style module>.aa{background-color: #00B43C;}.aa .bb{border: 1px solid #66512C;} </style>

123456789101112131415161718192021222324252627282930313233343536

2.子组件调用父组件样式

<template> <button :class="[$style.btn, primaryClass]">{{msg}}</button> </template> <script>export default {name: 'Button',props: {msg: String,primaryClass: ''}} </script> <style module>.btn {border: 1px solid #ccc;border-radius: 3px;padding: 5px 15px;background: #fefefe;margin: 5px;} </style>  <template><div id="app"><Button msg="Default Button" /><Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" /><Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" /><Button msg="Primary Button" :primaryClass="$style['btn-primary']" /> </div> </template> <script>import Button from './components/Button'export default {name: 'app',components: {Button},data() {return {isLg: true,isSm: false}}} </script> <style module>.btn-lg {padding: 15px 30px;}.btn-sm {padding: 5px;}.btn-primary {background: rgb(54, 152, 244);border-color: rgb(32, 108, 221);color: #fff;} </style>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

效果图如下所示：
在这里插入图片描述
（虽然上面的方法可以实现子组件调用父组件的样式，但是我还是想吐槽，子组件的样式不就应该写在子组件的样式里吗?这样写不是扰乱了组件样式封装的原本意图了吗?r如果真的想要修改子组件的样式，就像上诉遇到的vue项目中element-ui封装的组件样式并不是很满意，想要修改也不能往element-ui封装的组件里传入一个props来修改样式吧？？？）
3.配置
官方配置：

// webpack.config.js { module: { rules: [ // ... 其它规则省略 { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // 开启 CSS Modules modules: true, // 自定义生成的类名 localIdentName: '[local]_[hash:base64:8]' } } ] } ] } }

1234567891011121314151617181920212223

还有一种方式：在vue.config.js中添加如下配置

css: { loaderOptions: { css: { localIdentName: '[name]__[local]-[hash:base64:5]', camelCase: true } } } //localIdentName是格式化类名：name是当前文件名称，local是当前定义的类名名，hash是hash生成的字符串，长度为5 //camelCase：在类名有中横线时，'only'在标签上绑定类名时只支持大驼峰，true：支持大驼峰也支持中括号命名 12345678910

反正两种方式我都没有成功，求大神指教！出来的样式都是这样
在这里插入图片描述