Module not found: Error: Can't resolve './foo/foo.scss' in

Question

I cannot get to import my scss file into my tsx file. I get the following error:

ERROR in ./wwwroot/clientapp/components/technology/technology.tsx Module not found: Error: Can't resolve './technology/technology.scss' in 'C:\Repo\hobby\01.Code\Core\wwwroot\clientapp\components\technology' @ ./wwwroot/clientapp/components/technology/technology.tsx 3:0-38 @ ./wwwroot/clientapp/app.tsx npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] build: webpack npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

My webpack:

        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader" },
                {
                    loader: "typings-for-css-modules-loader",
                    options: {
                        namedexport: true,
                        camelcase: true,
                        modules: true
                    }
                },
                { loader: "sass-loader" }
            ]
        },

Added a declartion file under a new folder typings:

declare module '*.css' {
    const content: { [className: string]: string; };
    export default content;
}
declare module '*.scss' {
    const content: { [className: string]: string; };
    export default content;
}

and then importing:

import './foo/foo.scss';

When I do npm run build I get the error described above.

where is ./technology/technology.scss import? Where technology.scss is located relatively to the file that imports it? — Raz Ronen
yes it is located relative to import. It is correct since the auto complete did show the file paths — Adi Lavi
updated the full error message. Somehow the compiler is not generating declaration scss files — Adi Lavi
@AdiLavi, some IDE's autocomplete doesn't always work correctly. I've had issue in the past with VSCode the autocomplete import statement can be wrong. I wouldn't rely on to always be 100% correct. — TheLazyChap

Raz Ronen Raz Ronen · Accepted Answer · 2020-07-31T17:29:56

From the error message if you change the import from

'./technology/technology.scss'

to

'./technology.scss'

its suppose to work, can you check please?

Module not found: Error: Can't resolve './foo/foo.scss' in

1 Answers