Vuetify-module: Scss not able to compile but able to compile sass

[xgenvn]

Module version
latest

Describe the bug
It seems the loaders are messing up.

• Created a simple project for testing
• style-resources, sass-loader, node-sass are optional

vue init nuxt-community/typescript-template nuxt-ts-test
cd nuxt-ts-test
yarn
yarn add sass-loader node-sass
yarn add @nuxtjs/style-resources

• Added configuration as described in the repo https://github.com/nuxt-community/style-resources-module
• Try using simple scss in pages/index.vue, compile and working:

...
<style lang="scss">
.test{
  p{
    font-size: 3em;
  }
}
</style>

• Adding vuetify-module
• Compile again, got:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                                                                      friendly-errors 16:54:26
SassError: Expected newline.
   ╷
37 │ .test{
   │      ^
   ╵
  /home/b/nuxt-ts-test/pages/index.vue 37:6  root stylesheet
                                                                                                                                                                                                                                                        friendly-errors 16:54:26
 @ ./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&id=2a183b29&scoped=true&lang=scss& 4:14-391 14:3-18:5 15:22-399
 @ ./pages/index.vue?vue&type=style&index=0&id=2a183b29&scoped=true&lang=scss&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

```

Expected behavior

• Components and nuxt should load and compile scss correctly.

Notes

• It compiles correctly with sass syntax (lang='sass')

[clixmat]

Over here I have the same problem, I don't recognize the ";" when importing scss files from the main.scss

@kevinmarrec

[xgenvn]

My initial attempt is to write scss inside a page style, then will gradually migrate main.css into main.scss. But it failed at the start, it's why I have to add sass loader (which I can see vuetify-module already had).

[kevinmarrec]

@clixmat sass-loader is shipped by the Vuetify module, and it has been upgraded to v8 starting 1.6.0 version of the Nuxt Vuetify module.

Furthermore, Vuetify module use sass (dart-sass), not node-sass, which may cause issues.

Other notes :
@nuxtjs/styles-resources hasn't be upgraded to v8. So it isn't compatible with Vuetify module.

Please open an issue on @nuxtjs/styles-resources, or you can try the following :

1) Remove @nuxtjs/styles-resources
2) Move styleResources.sass && styleResources.scss paths to vuetify.customVariables

You may also check :
https://github.com/nuxt-community/vuetify-module/pull/139
https://github.com/nuxt-community/vuetify-module/issues/105
https://github.com/nuxt-community/vuetify-module/issues/82

[xgenvn]

@kevinmarrec Can you also give a guide on how to apply sass-loader that is shipped by vuetify-module?
I wanted to apply some styles inside a component.

Somehow the sass-loader is applying sass while actually it should be scss.

[kevinmarrec]

@xgenvn https://github.com/nuxt-community/vuetify-module#customvariables

// nuxt.config.js
export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss']
  }
}

It's named customVariables cause it has been implemented for such purpose, but you can use it to inject styles or mixins in all components as styleResources do.

[clixmat]

Hi, @kevinmarrec thanks for the prompt response, we have a confusion, this is my package.json and here the sass file structure that I am using, I do not have the "@nuxtjs/styles-resources" installed, should it be something else, can you help me?

"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "heroku-postbuild": "npm run build" }, "dependencies": { "@nuxtjs/axios": "^5.6.0", "cookieparser": "^0.1.0", "js-cookie": "^2.2.1", "nuxt": "^2.9.2", "nuxt-validate": "^1.0.1", "sweetalert2": "^8.16.3" }, "devDependencies": { "@nuxtjs/pwa": "^3.0.0-beta.16", "@nuxtjs/vuetify": "^1.6.0", "node-sass": "^4.12.0", "nodemon": "^1.19.1", "sass-loader": "^8.0.0" }

[kevinmarrec]

@clixmat See my last comment, use customVariables to provide abstracts/whatever.scss and so on to all your components.

Also you can remove node-sass (also clean your node_modules to be sure it's deleted), cause it may bring issues somehow.

[xgenvn]

@kevinmarrec I read the document carefully, but it doesn't cover component-based scoped style?

With vuetify-module enable, without style-resource, the scss syntax seems not allowed?

[clixmat]

@kevinmarrec Sorry for the inconvenience, I have done it as you explain in the example but without results, attached as I am calling it in nuxt.config

[kevinmarrec]

@xgenvn

the scss syntax seems not allowed

How do you know, errors ?

@clixmat Is it what @xgenvn saying ? it's not allowed or not working ?

[clixmat]

@kevinmarrec Did you see the image I placed? Is the way in which I am importing style sheets okay? In my case it doesn't work for me, remove node-sass, node_modules, I did the tests without success.

[clixmat]

Hi @kevinmarrec here repo! https://github.com/clixmat/vuetify-sass

[xgenvn]

@kevinmarrec when I use sass style, it's working, but not for scss. I have changed the title to be more precise.

[clixmat]

@kevinmarrec when I use sass style, it's working, but not for scss

for me no working nthing!

[xgenvn]

@xgenvn

the scss syntax seems not allowed

How do you know, errors ?

@clixmat Is it what @xgenvn saying ? it's not allowed or not working ?

I checked again with lang='sass' and it's working correctly. Need to update the style into sass btw.

[xgenvn]

@kevinmarrec when I use sass style, it's working, but not for scss

for me no working nthing!

Please check my example repo which is using sass
https://github.com/xgenvn/nuxt-ts-test.git

[kevinmarrec]

@xgenvn @clixmat @aldarund Please try 1.6.1, I've released a patch that should fix the scss issue.

[amritk]

Hey I was also seeing the same issue as @clixmat, what I had to do was change my config from this:

{
    vuetify: {
        optionsPath: '@/config/vuetify-options',
        treeShake: {
            loaderOptions: vuetifyLoader
        }
    },
    build: {
        loaders: {
            sass: {
                implementation: Sass,
                data: '@import "@/assets/styles/_helpers.sass"'
            }
        }
    }
}

to this:

{
    vuetify: {
        customVariables: ['@/assets/styles/_helpers.sass'],
        optionsPath: '@/config/vuetify-options',
        treeShake: {
            loaderOptions: vuetifyLoader
        }
    },
    build: {
        loaders: {
            sass: {
                implementation: Sass
            }
        }
    }
}

[clixmat]

Hello @kevinmarrec , with the new version everything went back to normal, zero errors!

[xgenvn]

@kevinmarrec I did a quick check, there is another problem with the newest release:

• The styles that are defined under customVariables will only apply to pages which having <style lang='sass'></style>

If that is intentional, can you confirm?

You can check the test repository: https://github.com/xgenvn/nuxt-ts-vuetify-test.

[aldarund]

@xgenvn yes, its intentional. For scss you can do it like this yourself

  build: {
    loaders: {
      scss: {
        prependData: '@import "~@/assets/scss/variables.scss";'
      }
    },

[aldarund]

closing this as it was resolved, in case of new problems please open new issue.

[kevinmarrec]

@aldarund Should we check extension and automatically push the good imports in correct loader's prependData's ? (For scss cases)

[kevinmarrec]

We could also rename the option as it is not only about customizing variables but overall prepending imports everywhere like does style-resource module (if i'm right)