使用webpack导入css库

Question

我正在用Vue.js构建一个项目，我正在使用webpack模板启动。 在文档[http://vuejs-templates.github.io/webpack/pre-processors.html]我可以这样说的：

独立的CSS文件

为确保一致的提取和处理，建议 进口全球性的，独立的样式文件从根App.vue 组件，例如：

<!-- App.vue --> 
<style src="./styles/global.less" lang="less"></style> 

注意：你可能只能通过 自己为你的应用程序写入的样式做到这一点。对于现有的库例如Bootstrap 或Semantic UI，您可以将它们放在/ static中，并直接在index.html中引用它们 。这样可以避免额外的构建时间，并且对于浏览器缓存也更好一些。

因此，包含一个css库（如Normalize或Bootstrap）的工作流程是通过npm/yarn安装它，将它复制到/ static然后在index.html文件中引用它？ 因为我发现这种方法非常乏味和脆弱，如果我想升级包，该怎么办？我需要将它们再次复制到/ static文件夹中...

没有其他方式可以通过包管理器与webpack安装css库吗？

Answer 1

基本上，你可以使用css-loader插件的Webpack。只需编辑你的webpack.config.js并通过这样做导入css：

从'file.css'导入css;