How can i use SCSS?

[oren-shlomi]

Hi there,
Trying to use SCSS with no success.
I tried using SCSS esbuild plugin but it did not work.

What is the proper way to do so?

[RadithSandeepa]

try this command:

npm install esbuild esbuild-plugin-sass sass

[ksachin7]

Hi there, Trying to use SCSS with no success. I tried using SCSS esbuild plugin but it did not work.

What is the proper way to do so?

---

• Install Dependencies
  npm install esbuild sass esbuild-plugin-sass --save-dev

• Configure esbuild

  const esbuild = require('esbuild');
  const sassPlugin = require('esbuild-plugin-sass');
  
  esbuild.build({
  entryPoints: ['src/main.js'], // Your main JavaScript file
  bundle: true,
  outfile: 'dist/bundle.js', // Output JavaScript file
  plugins: [sassPlugin()],
  
  // Add any other esbuild options you need here
  }).catch(() => process.exit(1));

• Create Your SCSS File eg. style.scss

• Import SCSS in Your JavaScript file.

• Run the esbuild build command to compile your SCSS and bundle your JavaScript: node esbuild.config.js.

• Check esbuild Logs: Ensure there are no errors during the build process by reviewing the output from esbuild.

• Inspect the Generated Files: Verify that the CSS is correctly included in your JavaScript bundle. You can do this by opening the dist/bundle.js file and checking for the CSS rules.