第一件事是,你需要知道的是,无论是在模板中、组件中还是页面中,都不能在任何地方声明html头部。
请记住,你不能使用html标签来实现这一点,你将使用json schema。
现在关于你是否想要全局导入CSS,正确的位置是在你的nuxt.config.js文件中,在这个文件中,有一个叫做head的属性,我们将在其中配置所有的导入项。
Nuxt2
https://v2.nuxt.com/docs/configuration-glossary/configuration-css/
所以,在nuxt.config.js中找到你的head部分,然后创建一个名为css的新属性,就像这样:
...
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
在Nuxt2中,你还需要在你的应用程序中安装一个CSS加载器,所以请确保你已经安装了"stylus"和"stylus-loader"。
[编辑] 添加nuxt3
Nuxt3
https://nuxt.com/docs/getting-started/styling#the-css-property
在nuxt3中,您可以在nuxt-config.ts文件中的head属性之外直接在css属性中导入。
export default defineNuxtConfig({
...
css: [`assets/styles/main.scss`],
...
})
在Nuxt3中使用SCSS,你需要安装"sass"和"sass-loader"包,请确保在使用之前已经安装好了。
npm i D sass sass-loader
在组件内部导入
另一种方式是直接在组件或页面中导入您的css/scss。这适用于Nuxt2和Nuxt3的两个版本。您可以像这样做:
<style lang="scss" scoped>
@import "./myCustomCss.css";
</style>
OR
<style scoped src="./myCustomCss.css">
</style>
head
元素。它不能位于body
中。除此之外,它可能会工作,但是指定路径上不存在 CSS。 - connexo