如何在 vue-cli 项目中配置 webpack css loader

Posted 2023-02-22

【中文标题】如何在 vue-cli 项目中配置 webpack css loader

【英文标题】：How to configure webpack css loader in a vue-cli project

【发布时间】：2018-05-17 02:55:35

【问题描述】：

我有一个新生成的vue-cli 项目。我已经使用npm install purecss --save 安装了 Pure.CSS 框架。但我不知道如何将 css 框架集成、导入或加载到我的项目中。我什至不知道我应该在项目中的哪个位置保留我常用的 css（mystyle.css 等）文件。我猜它应该在src/assets 目录中。这是vue-cliProject Structure。

如何将所有 css 文件捆绑在一个文件中，例如 app.css 或 main.css？

【参考方案1】：

您可以通过以下方式将其作为任何其他资源导入：

import '../node_modules/purecss/path/to/css/file.css'

例如在您的App.vue 中。

确保 node_modules 的路径正确。

然后您就可以在模板中的任何位置使用purecss 样式了。

【讨论】：

正确的语句是 import '../node_modules/purecss/build/pure-min.css'