Vue3中CSS的新玩法-CSS模块 & 动态CSS

html-css015

Vue3中CSS的新玩法-CSS模块 & 动态CSS,第1张

Vue3对CSS支持加入了更多的特性支持,这样的话,我们在项目当中使用CSS就变得更加灵活了,来吧我们直接上干货

在style的标签上加一个module的属性,这样style里面的内容就会被编译成CSS Modules(模块),默认情况下,我们可以在模板代码里,或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称,在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用,注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上

这个语法同样也适用于

自我理解的作用:解析转换.vue文件。提取出script,css,template,再分别交给对应的loader去处理。核心就是提取。

官方定义:

1、允许为vue组件的每个部分使用他的webpack loader,例如在style中使用sass,在template中使用Pug

2、允许一个.vue文件中使用自定义块,并对其运用自定义的loader链

3、使用webpack loader将style,template中引用的资源当作模块依赖处理

4、为每个组件模拟出scoped css

5、在开发过程中使用热重载来保持状态