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

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

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

阅读 1.3k
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏