nuxt 如何配置 css，以及css隔离

比如说要加reset.csscss文件。

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
  ]
})

meyerweb.com/eric/tools/css/reset/

nuxt里面是没有main.js的，所以说很多配置几乎都是在nuxt.config.ts里面配。

把reset.css文件加入static文件夹里面，然后在nuxt.config.ts里加上配置就可以了：

// nuxt.config.js

css: [
  '~/static/reset.css'
]

刷新页面。就可以看到生效了。如果没生效，那么就可以重启一下项目。

当然我们可以再去弄个网页

pages/list.vue

<template>
  <div>
    <h2>list页面</h2>
  </div>
</template>

一般做项目都必须写css样式。写一个scope就可以隔离样式。

<style scoped>
h2 {
  background: red;
}
</style>

要用sass，需要先安装yarn add --dev sass sass-loader@10

某个页面或者组件就可以使用

<style scoped lang='scss'>
ul {
  li {
    background: pink;
  }
}
</style>