Next.js: External SCSS with JSX and Typescript : cannot find module, jsx doesn't exist

[bsolca]

Examples bug report

Example app with next-sass

with-external-styled-jsx-sass
link

Describe the bug

Lint error when you install sass jsx with typescript

To Reproduce

1. Create project

   yarn create next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app

2. Add dependencies in package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc"
  },
  "dependencies": {
    "@zeit/next-typescript": "^1.1.1",

    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "node-sass": "^4.7.2",
    "sass-loader": "7.1.0",
    "@types/next": "^7.0.6",
    "@types/react": "^16.4.16",
    "@types/react-dom": "16.0.11",
    "typescript": "3.2.4"
  }
}

1. > yarn install
2. Add typescript to next config

const withTypescript = require('@zeit/next-typescript')


module.exports = withTypescript({
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require('styled-jsx/webpack').loader,
          options: {
            type: 'scoped'
          }
        },
        'sass-loader'
      ]
    })

    return config
  }
})

1. rename index.js to index.tsx

Expected behavior

yarn dev
It work but I don't know why linter say module are not found or jsx doesn't exist.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows
• Webstorm and VS Code
• Version of Next.js: ^8.1.0

[Timer]

Hi! You need to configure your TypeScript setup to allow importing .scss files.

You'll be able to find more help on this topic on Stack Overflow or a similar community.

[JerryGreen]

@bsolca did you solve it?

[sangdth]

@JerryGreen
This discussion https://github.com/zeit/next-plugins/issues/91 helped me fix this issue.

[JerryGreen]

May be useful for someone:

Currently, it's almost impossible to make SCSS and SASS work in newer versions of Next. At least it's unreasonably hard.

Instead of using scss or sass, I ended up using MaterialUI and its makeStyles helper, so styles are stored in a separate file with ts extension.

For those who don't like the idea of using MaterialUI (I don't like it either, honestly), then styled-jsx is the way. As recommended by official docs.

[Ekrekr]

May be useful for someone:

Currently, it's almost impossible to make SCSS and SASS work in newer versions of Next. At least it's unreasonably hard.

Instead of using scss or sass, I ended up using MaterialUI and its makeStyles helper, so styles are stored in a separate file with ts extension.

For those who don't like the idea of using MaterialUI (I don't like it either, honestly), then styled-jsx is the way. As recommended by official docs.

In case anyone's seeing this now, sass and css can be added easily using built in module support.

/components/topbar.module.scss

.wrapper {
  background: #000; 
  ...
}

/components/topbar.tsx

import styles from './topbar.module.scss';

export default function Topbar() {
  return (
    <div className={styles.wrapper}>
      ...
    </div>)
}

A global style sheet styles.scss can be placed at the root of the folder too.

styles.scss

html,
body {
  ...
}