Sass @use statements don't work

Bug report

Describe the bug

A clear and concise description of what the bug is.

In my global.scss file that is imported by src/pages/_app.tsx:

@use '@material/textfield/mdc-text-field';
@use '@material/select/mdc-select';

body {
  margin: 0;
  padding: 0;
  outline: 0;
  overflow-x: hidden;
}

Those @use statements fail however because the default sass-loader cannot find those stylesheets:

[ error ] ./src/pages/global.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/pages/global.scss)
SassError: Can't find stylesheet to import.
   ╷
24 │ @use "@material/density/functions" as density-functions;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/textfield/_mixins.scss 24:1         @use
  node_modules/@material/textfield/mdc-text-field.scss 23:1  @use
  /home/nchiang/repos/covid-tutoring/src/pages/global.scss 1:1                                                  root stylesheet

This would make sense, but I also included the node_modules directory where the imported stylesheets reside to our next.config.js (using the recently implemented fix):

const path = require('path');

module.exports = {
  sassLoaderOptions: {
    sassOptions: {
      includePaths: [path.resolve(__dirname, 'node_modules')],
    },
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['svg-url-loader'],
    });
    return config;
  },
};

And it still doesn’t work.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this repository
2. Install our dependencies with npm i
3. Run npm run dev or npx next
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

The sass-loader used by Next.js should know to look in our node_modules folder for those stylesheets.

System information

• OS: Ubuntu 18.04.2
• Version of Next.js: ^9.3.4
• Version of Node.js: v12.16.1

Additional context

Add any other context about the problem here.

You should also work on making this documentation more clear that Next.js has built-in support for Sass (see this issue for more info).

[iksent]

Yes, that’s true. I tried built-in support and it works too in dev-mode, but my problem with CSS imports in production was not resolved…

[iksent]

@nicholaschiang, hello!

I think, that to use SASS and CSS options, you need the following code:

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
  sassLoaderOptions: {
    // Resolving SASS absolute imports
    includePaths: [path.resolve(__dirname, 'src')],
  },
  cssLoaderOptions: {
    localIdentName: '[hash:base64]',
  },
  ...
}

It works for me and resolves my absolute imports for local folders within the @use.

BUT: I have problems with CSS import ordering in production. Found similar issues, and I’m trying to resolve this problem.