Next-plugins: next-sass can't find my sass module

[moonformeli]

Hi, I'm very new to Next, I'm trying to use Next + Express + Typescript + Sass.
But I got this error when I tried to use Sass.
Can someone help me?

// package.json

"dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "express": "^4.17.1",
    "next": "^9.0.6",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "typescript": "^3.6.3"
  },
  "devDependencies": {
    "@types/next": "^8.0.6",
    "@types/react": "^16.9.2"
  }

--pages
----index.tsx
----index.scss
--server
----server.js
--typings
----declarations.d.ts

// next.config.js

const path = require("path");
const withTypeScript = require("@zeit/next-typescript");
const withSass = require("@zeit/next-sass");

module.exports = withTypeScript(
  {
    webpack(config) {
      return config;
    }
  },
  withSass({
    cssModules: true
  })
);

This is what I have in my project, when I run npm run dev which is dev: node src/server/server.js, I got this error.

[error] ./pages/index.scss 1:0
Module parse failed: Unexpected token (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

// index.scss
.container {
  background: pink;
}

[pizzafox]

Possibly related issue: https://github.com/webpack-contrib/sass-loader/issues/344#issuecomment-270729267

[nathanredblur]

Sadly, You need to create a definition file.
so for:

// index.scss
.Container {
  background: pink;
}

you create

// index.scss.d.ts
export const Container:string

this is a bit annoying, so I try to find something to generate this files and dropbox has a plugin for webpack that solve this BUT for css files, no scss.

https://github.com/dropbox/typed-css-modules-webpack-plugin
In basically, before compile any css they check if definition already exist or not and create a css.d.ts file using https://github.com/Quramy/typed-css-modules .

Is required to generate the file before to compile because typescript need to be generated correctly.

So the solution to this will require one of this options:

1. create our own version of typed-css-modules-webpack-plugin that compile each scss file and then pass this temp css file to typed-css-modules to generate the scss.d.ts file. (and handle possible postCSS configs)
2. ignore all and create a generic definition file

declare module '*.scss' {
  const content: any;
  export = content;
}

1. not sure if is possible this hacky ways...
   
   
   
   • babel plugin to capture any styles.* and create the definition or allow to read scss files
   
   
   • some postCSS plugin to generate the definition file on save
   
   

Hope this help somehow to someone.

[nathanredblur]

I just try https://github.com/dropbox/typed-css-modules-webpack-plugin and works well with scss.
the processor is postCss and if you not use weird SCSS tricks works without problem. one issue is that is not re generating the files if you add or remove some class from your file.

this is my next.config.js

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2,
    localIdentName: '[local]___[hash:base64:5]'
  },
  webpack: (config, { dev }) => {
    if (!config.plugins) config.plugins = [];
    config.plugins.push(
      new TypedCssModulesPlugin({
        globPattern: 'components/**/*.scss',
      }),
    )
    return config;
  }
});

[Lemaro86]

I just try https://github.com/dropbox/typed-css-modules-webpack-plugin and works well with scss.
the processor is postCss and if you not use weird SCSS tricks works without problem. one issue is that is not re generating the files if you add or remove some class from your file.

this is my next.config.js

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2,
    localIdentName: '[local]___[hash:base64:5]'
  },
  webpack: (config, { dev }) => {
    if (!config.plugins) config.plugins = [];
    config.plugins.push(
      new TypedCssModulesPlugin({
        globPattern: 'components/**/*.scss',
      }),
    )
    return config;
  }
});

Thank you. You are the best!
Best way imho. I spent 24 hours to resolve this build bugs with css-modules + typescript + next js.

[olegcherr]

@nathanredblur thanks! Everything is great, except I got this error in console:
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

The error happens when TypedCssModulesPlugin reaches scss-specified syntax like // single-line comments or #{$variables}

How can I fix that?

PS: postcss-scss cannot be used as a plugin.

[nathanredblur]

I not remember well now. I think I had this issue and I give up because require to create a new plugin.
I just not use single-lines or computed variables. :(

also I not use this plugin in all. so in my next.config I have:

config.plugins.push(
        new TypedCssModulesPlugin({
          globPattern: '{components,style}/**/[!_]*.scss',
        })
      );

In this way I create the definition files only for scss files without dash in the first character.
and in this dash files I have things like _variables.scss or . _mixins.scss

I hope this help. :/

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.