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

没有其他方法可以将通过包管理器安装的 css 库包含在 webpack 中吗？

Answer 1

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

从'file.css'导入css；