在 Nuxt.js 项目中使用 normalize.css 的最佳方式是啥？

Posted 2023-03-13

【中文标题】在 Nuxt.js 项目中使用 normalize.css 的最佳方式是啥？

【英文标题】：What is the best way of using normalize.css in Nuxt.js projects?在 Nuxt.js 项目中使用 normalize.css 的最佳方式是什么？

【发布时间】：2019-12-14 14:44:25

【问题描述】：

我使用npx create-nuxt-app 命令搭建了一个新的Nuxt.js 项目，并将Bulma 用于UI 框架。 我了解到 bulma.css 文件已包含在具有以下配置的 nuxt.config.js 文件中。

modules: [
  '@nuxtjs/bulma'
]

但是我想使用normalize.css 来确保样式在所有浏览器中保持一致。为了使其正常工作，这个 normalize.css 文件应该包含在所有 css 文件的顶部。

我已经尝试将它导入到layout/default.vue 文件中，就像这样。 （我引用了this）

<style lang="scss">
  @import '~/node_modules/normalize.css/normalize.css'
</style>

但是当我检查 Chrome devtools 时，我了解到 normalize.css 文件实际上包含在底部。

在 normalize.css 之前包含的样式是 bulma.css

所以问题是：如何在这个 Nuxt.js 项目中正确导入 normalize.css 以便将其导入/包含在 css 文件列表的顶部？

【参考方案1】：

在 nuxt.config.js 文件中，我已将 normalize.css 包含为一个全局 css 文件，如下所示。

css: [
 'normalize.css/normalize.css'
],

并且 normalize.css 样式在 bulma.css 之前，所以看起来问题已经解决了。

【讨论】：

你把这个css文件放在哪个文件夹里，assets，还是static？

我已经通过 npm 命令安装了 normalize.css - npm install normalize.css