How to setup SASS/SCSS/sass-loader in Nuxt

by

To install SASS in Nuxt, you have to run yarn add -D sass [email protected] (or npm i -D [email protected] --save-exact && npm i -D sass).

The version of sass-loader needs to be exact and set at the latest 10.x.x because the next one (11.0.0) is using Webpack5, hence being a breaking change because Nuxt2 is only running on Webpack4 as shown here: https://github.com/webpack-contrib/sass-loader/releases

IF then, you still cannot use <style lang="sass"> in your .vue components, then proceed.

Add this to your nuxt.config.js file

export default {
  build: {
    loaders: {
      sass: {
        implementation: require('sass'),
      },
      scss: {
        implementation: require('sass'),
      },
    },
  }
}

Here is a working repo with the latest recommended sass (dart-sass) setup working properly with this kind of code

<template>
  <div>
    <span class="test">
      Hello there
    </span>
  </div>
</template>

<style lang="sass" scoped>
div
  .test
    color: red
</style>

PS: if SASS is properly installed, then SCSS is working as good because it’s basically the same thing.

If you have some warning on some things being deprecated like / for divison or any listed here: https://sass-lang.com/documentation/breaking-changes
You can refer to this answer for a fix: https://stackoverflow.com/a/68648204/8816585

More Related Contents:

  1. how to make a maximum 1MB upload image?
  2. Vuex – Do not mutate vuex store state outside mutation handlers
  3. How to make a dynamic import in Nuxt?
  4. this.$auth.loggedIn returning false
  5. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  6. Nuxt.js vuex store not persisted
  7. How to have list + details pages based on API fetched content
  8. Vue: wait to render until all components are mounted
  9. How to use microfrontends with Vue/Nuxt?
  10. How to deploy Laravel/Lumen Framework to the production server [closed]
  11. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  12. How to use .env variables in Nuxt 2 or 3?
  13. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  14. Vue Router return 404 when revisit to the url
  15. use axios globally in all my components vue
  16. How to use any icons with Nuxt3?
  17. How to install jQuery into Nuxt.js?
  18. Vue.js – How to remove hashbang #! from url?
  19. TypeError: this.getOptions is not a function
  20. Vue.js change {{ }} tags
  21. Pass data from child to parent in Vuejs (is it so complicated?)
  22. Vue.js—Difference between v-model and v-bind
  23. How to use any icons with Nuxt or Vue?
  24. What is nextTick and what does it do in Vue.js?
  25. “export ‘default’ (imported as ‘Vue’) was not found in ‘vue’
  26. Difference between v-model and v-bind on Vue.js?
  27. How to make dynamic routes on the vue router?
  28. Refused to apply style from ” because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
  29. How can I share data between non parent-child components in Vue
  30. Vuex – Computed property “name” was assigned to but it has no setter

Leave a Comment