Nuxt•2w ago

(Solved) Nuxt with SASS - Legacy Deprecation

Hi. I am runnning into an issue while trying to use sass with Nuxt 3 project. I'm more of a do it yourself type of guy and therefore would like to use SASS. The sass package I use though, is throwing deprecation errors:

[3:37:33 PM]  WARN  Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

[3:37:33 PM]  WARN  Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Does anyone know the solution to this? I have thought about saying f*ck it and use prepros to compile to css and just load that file, but then I loose the possibility to have scoped styling. Maybe I dont need a sass package at all? is it supported by default?

3 Replies

kapa.ai•2w ago

Hi @Polak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is related to using SASS with Nuxt 3, and I can provide some insights based on the available information. The deprecation warning you're seeing is related to the SASS package you're using. It's indicating that the legacy JavaScript API for SASS is deprecated and will be removed in Dart Sass 2.0.0. This is a common issue that Nuxt users have encountered recently. Here are some key points and potential solutions: 1. Nuxt 3 supports SASS out of the box, so you don't need to install a separate SASS package. As mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/styling#using-preprocessors), you can use SASS by simply installing it:

   npm install -D sass

   npm install -D sass

2. After installation, you can use SASS in your Nuxt 3 project without any additional configuration. You can write your styles in .scss or .sass files and import them in your components or layouts. 3. To use SASS in a component, you can use the lang attribute in your <style> tag:

   <style lang="scss">
   // Your SASS code here
   </style>

   <style lang="scss">
   // Your SASS code here
   </style>

4. If you want to use global SASS files, you can add them to the css array in your nuxt.config.ts file:

   export default defineNuxtConfig({
     css: ['~/assets/scss/main.scss']
   })

   export default defineNuxtConfig({
     css: ['~/assets/scss/main.scss']
   })

5. The deprecation warning you're seeing might be related to an older version of the SASS package. Updating to the latest version might resolve this issue. 6. If you're using Vite (which is the default for Nuxt 3), you can configure SASS options in your nuxt.config.ts file:

   export default defineNuxtConfig({
     vite: {
       css: {
         preprocessorOptions: {
           scss: {
             additionalData: '@use "~/assets/_colors.scss" as *;'
           }
         }
       }
     }
   })

   export default defineNuxtConfig({
     vite: {
       css: {
         preprocessorOptions: {
           scss: {
             additionalData: '@use "~/assets/_colors.scss" as *;'
           }
         }
       }
     }
   })

This example shows how to include a global SASS partial file as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/styling#using-preprocessors). 7. Regarding scoped styles, you can still use them with SASS in Nuxt 3. Just add the scoped attribute to your <style> tag:

   <style lang="scss" scoped>
   // Your scoped SASS styles here
   </style>

   <style lang="scss" scoped>
   // Your scoped SASS styles here
   </style>

In conclusion, you don't need to use a separate SASS package or Prepros to compile your SASS files. Nuxt 3 supports SASS natively, and you can use it with scoped styles. If you're still encountering issues, try updating your SASS package to the latest version and ensure your Nuxt configuration is correct. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PolakOP•2w ago

Solved. For anyone else experiencing this issue. Install sass embedded:

pnpm add -D sass-embedded

pnpm add -D sass-embedded

And add this to your nuxt.config.ts:

vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler' // or "modern"
                }
            }
        }
    },

vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler' // or "modern"
                }
            }
        }
    },

Yoinked from smart brains out there on the internet.

Gaming

Programming

(Solved) Nuxt with SASS - Legacy Deprecation