Saya sedang mengerjakan aplikasi vuejs dan saya mencoba mengimpor file variabel saya menggunakan aturan @use dalam prependData di sass-loader, tetapi tampaknya tidak berfungsi dengan benar. Menggunakan @use impor tidak berfungsi dan saya menerima kesalahan tentang variabel. Tetapi menggunakan @import semuanya berjalan dengan baik. Apakah saya melakukan sesuatu yang salah atau mendapatkan konsep yang salah tentang aturan @use?

Menggunakan @import di prependData berfungsi:

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      // prependData: `@use '~abstracts/variables'` //this does not work
      prependData: `@import '~abstracts/variables'` //this works
    }
  }
}

Menggunakan @use tidak berfungsi:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
15 │     color: $chuck
   │            ^^^^^^
   ╵

Paket saya.json:

"sass": "^1.26.3",
"sass-loader": "^8.0.2"

Komponen saya:

<style lang="sass">
    .title
        color: $chuck
</style>

File variabel.sass saya:

$chuck: #BADA55

TIA

3
Pisandelli 27 Maret 2020, 17:11

1 menjawab

Jawaban Terbaik

Saya baru tahu apa yang saya lewatkan.

Cukup tambahkan as *:

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      prependData: `@use '~abstracts/variables' as *`
    }
  }
}

I'm just getting used to this new way of using sass.


2
Pisandelli 30 Maret 2020, 22:31