Vue3中CSS的新玩法-CSS模块 & 动态CSS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3中CSS的新玩法-CSS模块 & 动态CSS相关的知识,希望对你有一定的参考价值。
参考技术A 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.js 预取 CSS 文件
【中文标题】Vue.js 预取 CSS 文件【英文标题】:Vue.js prefetch CSS files 【发布时间】:2019-06-09 07:53:07 【问题描述】:我有一个 Vue CLI 3 项目,组件延迟加载。在运行 npm run build
并为 dist
文件夹提供服务时,我看到一个 CSS 文件首先被预取然后加载:
<link href="/css/article.70090a14.css" rel="prefetch">
和
<link rel="stylesheet" type="text/css" href="/css/article.70090a14.css">
这是执行 npm run build
时 Webpack 配置的默认行为。目前 Lighthouse(Google 的审计工具)正在抱怨并建议我以下几点:
“预加载密钥请求:/css/article.70090a14.css
”
我的问题是,如何添加/更改此行为以执行 preload
而不是 prefetch
?
【问题讨论】:
【参考方案1】:你可以使用这个插件来预取 css 文件: https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin
或
您可以使用style-loader将css集成到js文件中,然后使用webpackPrefetch
魔术注释预取js文件:
import(/* webpackPrefetch: true */ "...")
【讨论】:
没有另一个依赖就没有办法做到这一点吗?是否有我缺少 atm 的 Vue 特定工具可用? 随着 webpack 构建你的静态,我不认为 Vue 有什么要说的。 但您可能想阅读以下内容:cli.vuejs.org/guide/html-and-static-assets.html以上是关于Vue3中CSS的新玩法-CSS模块 &amp; 动态CSS的主要内容,如果未能解决你的问题,请参考以下文章