Cara Menggunakan SCSS secara Global dan Localscope Module di Next JS

Image result for nextjs img
Next JS

Next JS secara default belum bisa melakukan global dan localscope module. Namun, bisa untuk CSS. Hal ini bisa dilihat pada dokumentasi Next JS versi 9.2 :

Sayangnya, tentu saja apabila kita ingin menggunakan SCSS , maka kita harus menggunakan Module lain. Dalam kasus ini, Issue ini dibahas pada https://github.com/zeit/next-plugins/issues/149 . Setelah mencoba beberapa cara dan mengalami kebuntuan, akhirnya saya menggunakan salah satu module di https://github.com/webdeb/next-styles caranya adalah sebagai berikut :

Install Dahulu

npm install @webdeb/next-styles

Setup Next Config

const withStyles = require("@webdeb/next-styles");

module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
  sassLoaderOptions: {
    sassOptions: {
      includePaths: ["src/styles"] // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
    }
  },
  cssLoaderOptions: {
    importLoaders: 1
  },
  postcssLoaderOptions: {
    parser: true
  }
});

Permasalahan Lain

Pages yang menggunakan module ini, akan mengalami beberapa masalah misalnya saja

Pages tidak bekerja atau tidak bisa diakses

Solusinya adalah dengan import global scss pada file _app.js walaupun file global scss kita kosong.

import "../styles/global.scss"

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Style tidak terapply

Pages style / localscope style tidak terapply atau sederhananya seperti video berikut

Solusinya adalah ada yaitu bisa dicek pada issue https://github.com/zeit/next-plugins/issues/484 . Namun, saya sendiri belum pernah mencobanya. Sehingga saya tidak bisa menuliskan tutorialnya. Cara lainnya karena kejadian ini hanya akan terjadi saat proses development. Tidak akan terjadi pada proses produksi. Sehingga untuk cek, nanti bisa setelah melakukan proses produksi pada Next JS dengan

npm run build
npm start

Sumber :

  1. NextJS Module SCSS Global and Local
  2. NextJS Support CSS Global and Local
Tagged , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *