Menambahkan SASS Secara Global di VueJS

April 6, 2021 2 min read
Belajar bagaimana menambahkan SASS secara global ke dalam project VueJS.

Di dunia CSS, kita bisa melihat banyak preprocessor hebat yang membantu memudahkan kita dalam mengembangkan CSS, seperti SASS/SCSS, LESS dan PostCSS. Diantara itu semua, SASS menjadi yang paling populer dan banyak digunakan karena memiliki banyak fitur dan syntax yang mudah dimengerti.

Di VueJS, kita bisa menggunakan SASS dengan mudah, dengan menambahkan properti lang="scss" pada komponen Vue.

<style lang="scss">
$bg-main: #232323;

.main {
  background: $bg-main;
}
</style>

Selain itu, kita juga bisa memisahkan variable SASS, mixin, dan fungsinya di dalam file yang terpisah.

<style lang="scss">
@import "./scss/_variables.scss";

.main {
  background: $bg-main;
}
</style>

Masalahnya adalah saat kita ingin menggunakan variable, mixin, atau fungsi SASS kita harus mengimport satu persatu di setiap komponen.

<style lang="scss">
@import "./scss/_variables.scss";
@import "./scss/_mixins.scss";
@import "./scss/_functions.scss";
/* ... */
</style>

Solusinya, kita bisa menambahkan SASS ke dalam project VueJS secara global.

Menambahkan SASS secara global di VueJS

Pertama tambahkan SASS dan dependensinya ke dalam project.

npm install --save-dev node-sass sass-loader

Selanjutnya kita bisa sedikit memodifikasi vue.config.js dengan menambahkan opsi css yang didalamnya terdapat loaderOptions.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "~/scss/_variables.scss";
          @import "~/scss/_mixins.scss";
        `
      }
    }
  }
};

Selanjutnya kita bisa menggunakan SCSS di semua komponen tanpa melakukan import lagi.

<style lang="scss">
.main {
  background: $bg-main;
}
</style>

Perlu di ingat, file yang kita impor dalam konfigurasi diatas hanya berisi kode SASS yang tidak dirender, seperti variables, mixins dan functions.

Referensi

Globally Load SASS into your Vue.js Applications


Terima kasih sudah membaca artikel "Menambahkan SASS Secara Global di VueJS"
Bagikan
Silahkan Login untuk berkomentar.