Hi @verbal idol. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How to make sass app with NuxtJS3?
loud hornetBOT
To create a Sass app with Nuxt 3, you'll need to follow these steps:
- Install Sass:
First, install the Sass preprocessor:
npm install -D sass
-
Create Sass files:
Place your Sass files in theassetsdirectory. For example, you might have a main Sass file atassets/scss/main.scss. -
Configure Nuxt:
In yournuxt.config.tsfile, add the following configuration:
export default defineNuxtConfig({
css: ['~/assets/scss/main.scss'],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/scss/_variables.scss" as *;'
}
}
}
}
})
This configuration does two things:
- It includes your main Sass file globally.
- It allows you to use Sass variables and mixins across your components without explicitly importing them each time.
Nuxt Documentation (https://nuxt.com/docs/getting-started/styling#using-preprocessors)
- Structure:
A typical structure for a Nuxt 3 project with Sass might look like this:
your-nuxt-project/
├── assets/
│ └── scss/
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── main.scss
├── components/
├── pages/
├── public/
├── nuxt.config.ts
└── package.json
- Using Sass in components:
You can use Sass directly in your Vue components:
<template>
<div class="example">Hello Nuxt with Sass!</div>
</template>
<style lang="scss">
.example {
color: $primary-color; // Using a variable from _variables.scss
}
</style>
Remember, Nuxt 3 uses Vite by default, which handles Sass compilation for you. There's no need for additional watchers or compilers.
Stack Overflow - Nuxt 3 + SASS (https://stackoverflow.com/questions/77544274)