nuxt 怎么安装sass
时间: 2024-01-12 12:05:24 浏览: 161
手动安装:node-sass
要在 Nuxt.js 项目中使用 Sass,需要安装 `node-sass` 和 `sass-loader`。可以通过以下命令进行安装:
```bash
npm install --save-dev node-sass sass-loader
```
安装完毕后,在 Nuxt.js 项目的 `nuxt.config.js` 配置文件中配置 `css` 属性,指定使用 `sass-loader`:
```js
module.exports = {
css: [
// 指定使用 sass-loader
{ src: '~/assets/scss/main.scss', lang: 'scss' }
]
}
```
然后在 `assets/scss` 目录下新建 `main.scss` 文件,可以在其中编写 Sass 样式代码。注意,这里使用的是 `scss` 语法格式,而不是 `sass`。
最后,可以在组件中引入该样式文件:
```html
<template>
<div class="container">
<h1>Hello World</h1>
</div>
</template>
<style lang="scss">
@import '~/assets/scss/main.scss';
.container {
background-color: $primary-color;
}
</style>
```
在上面的例子中,`@import '~/assets/scss/main.scss';` 引入了 `main.scss` 文件中定义的所有样式,然后在 `.container` 类中使用了 Sass 变量 `$primary-color`。
阅读全文