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

Question

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

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

Answer 1

虽然不知道出于什么需求，首先仍然不太赞同此行为，个人认为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