在Web组件模板中外部加载CSS文件

Question

我正在使用Webpack捆绑我的项目，并且希望将样式作为外部链接加载到Web组件模板中，以便可以利用浏览器缓存。

当我内联加载CSS时，效果很好，但我想避免这样做，因为我认为最好不要在同一页面中重复大量CSS。

我尝试了以下步骤

• 保持CSS名称为静态-可行，但不是可行的解决方案，因为它不利于缓存爆发

• 尝试通过webpack将动态生成的文件名公开为全局常量。它不起作用：（

  新的webpack.DefinePlugin（{PUBLIC_CSS_FILE：JSON.stringify（'css / [name]。[hash] .css'））}

链接到示例代码-> https://github.com/nmakod/web-component

任何建议都会很有帮助