首页 > 解决方案 > 在 Nuxt.js 项目中使用 normalize.css 的最佳方式是什么?

问题描述

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

modules: [
  '@nuxtjs/bulma'
]

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

我已经尝试将它导入到这样的layout/default.vue文件中。(我参考了这个

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

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

chrome devtools 上的元素检查屏幕截图

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

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

标签: nuxt.jsnormalize-css

解决方案


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

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

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

在此处输入图像描述


推荐阅读