使用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文件夹中...

还有没有其他方法可以将通过程序包管理器安装的CSS库与webpack包括在一起？

Answer 1

基本上，您可以将css-loader插件用于Webpack。 只需编辑您的webpack.config.js并通过执行以下操作导入css：

从'file.css'导入CSS;