怎么给在 Vue SFC script 中引入的 CSS 加 scope？

  • Z时代
  • 2024-02-25
  • 分类：IT

描述如题，怎么给在 Vue SFC script 中引入的 CSS 加 scope，达到和 scoped-style-block 一样的效果？

没想到很好的解决方法，也没找到相关工具。我觉得次一点的方案也许是写一个 loader 专用来处理 .vue 文件，在 vue-loader 之前就把 JS 中相关 CSS 挪到单独的 style-block 中。再把处理结果交给 vue-loader 或后面的其它 loader 处理。

回答：

虽然不知道出于什么需求，首先仍然不太赞同此行为，个人认为vue sfc设计足够好，足够普遍适用性，mutil style 、css module本身都支持。

但是，提供一些hack思路?（仅供参考，并未实际验证）

  1. 你的思路，简单、可行。需要一个prev vue file 的loader ，即

    {
     test:/\.vue/,
     loaders:["prev-vue-loader","vue-loader"] // patch mode
     // loaders:["vue-loader","prev-vue-loader"] // normal mode
     // prev-vue-loader 只做一件事就是正则/ast解析样式导入，然后拼成style标签，拼在内容后面
    }
  2. 魔改vue-loader，在script块，解析样式导入,同下⬇ 内联拼接

  3. 包装一层loader，把vue-loader 生成scoped id的cv过来，拼内联结果

    import "...xxxx!vue-loader/lib/loaders/stylePostLoader./index.css?scoped&id=xxx"

2，3其实同，关键都是拿到scopedId 然后丢给complier/sfc 的complierStyle 处理一下，然后丢给vue-style-loader 或者extract

以上是 怎么给在 Vue SFC script 中引入的 CSS 加 scope？ 的全部内容， 来源链接： utcz.com/p/933211.html

回到顶部