spfx-fast-serve: Unable to find .module.scss

Thanks @PooLP for checking that. On my side, I will update FAQ to add words about unused components as well. Also I will check whether it’s possible to somehow exclude unused components completely from fast-serve build so that it doesn’t produce this problem.

Hi @M365Bass sorry for bothering you again, but while working on some other fast-serve features I was able to reproduce your issue (for me it happens approx. 4 out of 10 times). I discovered that the reason is the async nature of TypeScript checker plugin and clear-css-module plugin used inside fast-serve. However, I was able to fix it.

Could I ask you to check whether it works for you?
You can just grab this test project (just a hello-world) - test.zip, run npm i and npm run serve. I’m quite confident this time you shouldn’t see any errors.

If you want to apply the fix to the existing projects you just need to make sure that you use spfx-fast-serve-helpers@1.12.18 or above. npm list spfx-fast-serve-helpers will print the actual version used. To update just run npm update spfx-fast-serve-helpers or remove node_modules, package-lock.json and then npm i.

You can also have IntelliSense in VSCode if you slightly extend your solution above with typings folder.
Just install npm install typescript-plugin-css-modules --save-dev --save-exact. Then modify tsconfig.json and add plugins section for compilerOptions:

"plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ],

Then you should tell VSCode to use the workspace version of TypeScript (by default it uses globally installed with VSCode). Here’s how to use the workspace version of TypeScript in VS Code (taken from SO here):

1. Open any TypeScript file.
2. Click the version number on the blue status bar at the bottom of VS Code. Click “Select TypeScript version”
3. Select Use Workspace Version (3.7.3 as of this writing).

Here’s a screenshot to make that clearer:

1. Restart VSCode

Now you should see the IntelliSense for scss modules.

typescript-plugin-css-modules is a language extension, which adds support for such kind of IntelliSense, however, it doesn’t provide compile-time checking, thus declaration.d.ts still needed in order to compile TS sources. It doesn’t break the default SPFx build, so “gulp serve” also just works, however, all this stuff requires some manual steps. As a workaround, you can implement it in your solution.

I will close the issue having in mind the above workaround. We’ll see whether more devs have the same problems in the future.

The project from the zip file works fine in my environment (macOS 11.3.1, node 14.16.1, npm 6.14.12)

it is possible to do not open the local workbench on first start ? the --nobrowser tag didn’t work for me.

Yes, please check out documentation.