在 Nuxt.js 项目中使用 normalize.css 的最佳方式是什么?
What is the best way of using normalize.css in Nuxt.js projects?
我使用 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 以便它位于顶部 imported/included在 css 文件列表中?
在 nuxt.config.js
文件中,我将 normalize.css 作为全局 css 文件包含在内,如下所示。
css: [
'normalize.css/normalize.css'
],
并且 normalize.css 样式出现在 bulma.css 之前,看来问题已解决。
我使用 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 以便它位于顶部 imported/included在 css 文件列表中?
在 nuxt.config.js
文件中,我将 normalize.css 作为全局 css 文件包含在内,如下所示。
css: [
'normalize.css/normalize.css'
],
并且 normalize.css 样式出现在 bulma.css 之前,看来问题已解决。