使用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>

     

请注意，您应该只针对所写的样式执行此操作   你自己的应用程序。对于现有库，例如引导   或语义UI，您可以将它们放在/ static中并引用它们   直接在index.html中。这样可以避免额外的构建时间   更适合浏览器缓存。

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

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

Answer 1

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

从'file.css'导入css;