The "sass" file extension doesn't work

[Hubro]

I'm having issues with the sass support built in to Next.js (specifically vercel/next-plugins#149), so I decided to try your fix.

It doesn't seem to work though.

Here is my next.config.js:

const path = require("path");

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

module.exports = withStyles({
  pageExtensions: ["tsx"],

  webpack: config => {
    config.resolve.alias['~'] = path.resolve(__dirname) + "/src";
    return config;
  },

  // next-styles configuration
  sass: true,
  modules: true,
  sassLoaderOptions: {
    sassOptions: {
      includePaths: ["src/styles"], // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
    },
  },
  cssLoaderOptions: {},
  postcssLoaderOptions: {},
});

console.log("EXPORTED NEXT CONFIG:", module.exports);

(I added that last line in an attempt to check what next-styles added, but as it's all done in the webpack function it didn't help.)

Here is my src/pages/_app.tsx file:

import { AppProps } from "next/app";

// TODO: Import only what is used
import "bulma/bulma.sass";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp;

When I run the dev server, it's throwing an error as if I hadn't configured a loader at all:

[ info ]  waiting on http://localhost:3000 ...
EXPORTED NEXT CONFIG: {
  pageExtensions: [ 'tsx' ],
  webpack: [Function: webpack],
  sass: true,
  modules: true,
  sassLoaderOptions: { sassOptions: { includePaths: [Array] } },
  cssLoaderOptions: {},
  postcssLoaderOptions: {}
}
[ error ] ./node_modules/bulma/bulma.sass 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "utf-8"
| /*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
| @import "sass/utilities/_all"
[ wait ]  compiling ...

Any idea what's wrong here? Did I mess something up, or doesn't next-styles work with this Next.js version?

[webdeb]

Thank you! Its because I forgot to add the "sass" extension support. "scss" should work.
I am on something else right now, do you like to take action and add support for sass files?

Check this lines:
https://github.com/webdeb/next-styles/blob/master/withStyles.js#L85-L86
https://github.com/webdeb/next-styles/blob/master/withStyles.js#L103

[Hubro]

Thank you! Its because I forgot to add the "sass" extension support. "scss" should work.
I am on something else right now, do you like to take action and add support for sass files?

Check this lines:
https://github.com/webdeb/next-styles/blob/master/withStyles.js#L85-L86
https://github.com/webdeb/next-styles/blob/master/withStyles.js#L103

Hmm... I replaced all instances of scss in patterns with s[ac]ss, and it seems to have somewhat worked. I can now import styles globally, and I can use modules, but only on the initial build.

As soon as I change anything that causes hot module replacement, I get this error:

This also happens if I just use scss...

If I just use css, everything works perfectly ☹️

[Hubro]

Woopsie! My bad, turns out I need some extra TypeScript configuration to allow importing weird extensions like "scss" and "sass". Weirdly enough "css" worked by default though. Probably because of the references in next-env.d.ts.

Anyway, I just added these 2 lines to the bottom of next-env.d.ts and now everything appears to be working perfectly:

declare module "*.sass";
declare module "*.scss";

I'll make a pull request asap.