CODEWITHSUNDEEP
reactjssassnext.js
Hadock
Hadock

Reputation: 966

who to use scss in nextjs

edit

the error : __app in place of _app.

I'm little bit confused about my problem. I want to use scss in my react/next app but nothing work.

I installed :

yarn add node-sass @zeit/next-sass

In my __app.tsx i put :

import React from 'react';
import '../styles/importer';

/**
 * includes all pages, here allows to import the css import everywhere
 * @Param {any} Component
 * @Param {any} pageProps
 * @Constructor
 */
export default function MyApp({ Component, pageProps }: any): JSX.Element {
  return <Component {...pageProps} />;
};

For the test i created the index page with :

import React from 'react';

function HomePage() {
  return (
    <section id='home-page'>
      <h1 className='title'>Welcome</h1>
    </section>
  )
}

export default HomePage;

and the scss file :

// importer.scss
@charset "utf-8";
@import "theme";

// theme.scss
#home-page {
  background-color: #ff0000;

  .title {
    color: #00ffff;
  }
}

I have too a next.config.js :

const withSass = require('@zeit/next-sass')
module.exports = withSass({})

Upvotes: 1

Views: 259

Answers (2)

Titulum
Titulum

Reputation: 11486

Okay it looks like there were some mistakes in your project setup:

  1. Your __app.tsx file should be _app.tsx.
  2. You should import the importer.scss file with the file extension.

enter image description here

Upvotes: 0

William Rizzi
William Rizzi

Reputation: 613

Look at their doc's https://nextjs.org/docs/advanced-features/custom-app

You are creating a custom App.js that should start with only one _ but your App.js has two.

Upvotes: 1

Related Questions