Build:Cannot find module OurFirstAppWithFVisualStudio.module.scss

Question

I am using NodeJS tools for visual studio for building a SPF App like shown here:

https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-visual-studio

However after doing all steps, I have this error

Severity Code Description Project File Line Suppression State Error Build:Cannot find module './OurFirstAppWithFVisualStudio.module.scss'. NodejsApp1 E:\GoogleDrive\Labs\SPF\OurFirstSPFAppWithVisualStudio\src\webparts\ourFirstAppWithFVisualStudio\OurFirstAppWithFVisualStudioWebPart.ts 8

When I checked the solution, I noticed the .scss file was excluded from the solution, so my first action was to include it in the project.

However that didnt have any effect.

Answer 1

The problem is perhaps that typescript cannot find the typings for for your module OurFirstAppWithFVisualStudio.module.css which it is being unable to resolve your module. Try requireing the styles. If typescript is unable to resolve the require function add the following in a .d.ts file

declare interface IRequire {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
}

declare var require: IRequire;

In your project. You don't need to do import styles from './...scss'. Simply importing or requiring the file should do the trick. Although make sure you have configured the style loaders in your webpack.config.js or any other bundler if you're not using webpack. You can follow this article to configure the loaders in webpack. If neither of these work for perhaps you can create declaration files for your css modules using typed-css-modules