nuxt3实战之alone-blog（四）：引入sass并了解下nuxt3的SEO
K先生
爱技术2727
在项目中使用sass感觉会很方便，所以我们alone-blog项目中要用它，还有就是nuxt3的SEO也在这一句先简单了解下。
一、安装并使用sass
安装很简单：pnpm add -D sass
安装完成之后，先分别创建assets/style/variable.scss和assets/style/base.scss两个文件，解释一下，其中variable.scss文件会定义alone-blog项目中使用到的一些css变量，放在一个文件中方便管理，另外一个base.scss文件就放一些基础的通用的样式吧。然后下面看下怎么配置，在nuxt.config.ts文件中：
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'],
tailwindcss: {
},
app: {
head: {
charset: 'utf-8',
title: 'nuxt3项目实战之alone-blog',
meta: [
{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' },
{ name: 'description', content: 'nuxt3项目实战之alone-blog：nuxt3+tailwindcss' }
]
}
},
css: [
'~/assets/style/base.scss',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/style/variable.scss" as *;'
}
}
}
}
})
这上面是此时完整的配置文件，这里先看css那一项和vite中的css那一项，作为定义全局变量的variable.scss文件，这里放到vite的预处理中，而base.scss文件正常引入就行了。
二、了解下nuxt3的SEO
上面配置文件中的app.head中的内容就是我们seo需要用到的了，在这个配置文件定义的就是全局的，title和meta信息都可以自定义，在这定义完之后，我们回到浏览器查看源代码，会看到：
这不就是我们seo所需要的吗？！
在nuxt.config.ts这里面定义的是全局的，那么怎么在单个页面中定义呢？修改一下pages/index.vue文件：
<template>
<div>
<Head>
<Title>{{title}}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" />
</Head>
<p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
<nuxt-link to="/about">关于我们</nuxt-link><br>
<nuxt-link to="/info/2">进入详情页</nuxt-link>
</div>
</template>
<script setup>
const title = ref('alone-admin企业官网')
</script>
这应该一看就懂了，就不多说了。
作者：K先生本文地址：http://www.gold404.cn/info/151
版权声明：本文为原创文章，版权归 K先生个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
文章评论
评论列表