{ Ellis Min }

[Next.js]: Set up Sass/Scss environment with Next.js

Next.js

05/10/2020

Install next-sass & node-sass

BASH
npm i @zeit/next-sass node-sass

Create next.config.js in the root directory & import

After saving the file, you need to restart the server

/next.config.js
JS
const withSass = require("@zeit/next-sass")
module.exports = withSass()

Styling

/components/Button/styles.scss
SCSS
.custom-button {
  cursor: pointer;
  background: #333;
  color: #fff;
  padding: 1rem;
}
/components/Button/index.js
JSX
import React from "react"
import "./styles.scss" 


const Button = ({ children }) => {
  return <button className="custom-button">{children}</button>
}


export default Button

WRITTEN BY

Ellis Min

Keeping a record

GitHub