style-resources icon indicating copy to clipboard operation
style-resources copied to clipboard

hoistUseStatements not working

Open augnustin opened this issue 3 years ago • 1 comments

I get the following error on every component with custom styles:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                        friendly-errors 14:02:41
SassError: @use rules must be written before any other rules.
  ╷
3 │ @use "sass:list";
  │ ^^^^^^^^^^^^^^^^
  ╵
  pages/dashboard.vue 3:1  root stylesheet

With the following config:

nuxt.config.js:

  buildModules: [
    '@nuxtjs/style-resources',
    '@nuxtjs/vuetify',
  ],
  styleResources: {
    // your settings here
    scss: ['~/assets/uses.scss'],
    hoistUseStatements: true  // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.
   },

use.scss:

@use "sass:list";
@use 'sass:math';

package.json:

    "vue": "^2.6.14",
    "@nuxtjs/style-resources": "^1.2.1",
    "nuxt": "^2.15.8",
    "sass-loader": "^10.2.0",
    "sass": "~1.32.13",

No idea how to further test things or bring any useful info.

augnustin avatar Jun 23 '22 14:06 augnustin

Maybe prepare a simple project that reproduces because very similar setup (without vuetify) works for me.

rchl avatar Jun 23 '22 21:06 rchl