nuxt3项目style lang=postcss 中使用嵌套语法
时间: 2024-05-09 15:21:01 浏览: 11
在 Nuxt 3 项目中,你可以使用 PostCSS 的嵌套语法来编写 CSS。以下是如何使用嵌套语法的步骤:
1. 安装 PostCSS 和 postcss-nested 插件:
```bash
npm install postcss postcss-nested --save-dev
```
2. 在 `nuxt.config.js` 中配置 PostCSS 插件:
```js
export default {
build: {
postcss: {
plugins: {
'postcss-nested': {},
},
},
},
}
```
3. 在 CSS 文件中使用嵌套语法:
```css
.parent {
color: red;
.child {
color: blue;
}
}
```
在上面的例子中,`.child` 的样式会继承 `.parent` 的样式,并且可以通过嵌套的方式来实现。
注意:如果你想在 Vue 组件中使用嵌套语法,需要将 `style` 标签的 `lang` 属性设置为 `postcss`。例如:
```vue
<template>
<div class="parent">
<div class="child">Hello World!</div>
</div>
</template>
<style lang="postcss">
.parent {
color: red;
.child {
color: blue;
}
}
</style>
```