Typescript plugin is complaining about imported SCSS

[MrCryptoWizard]

Howdy everyone,

Since I am not sure if this is a bug or simply something I am missing, I thought to post this here first.

I have a very simple project, where I import SCSS files into my typescript files.

import styles from './close-toggle.styles.scss';

I have a super simple plugin for transforming the SCCS (*.styles.scss) into CSS and then to an exporting string in a JS file. This works just fine in the DEV-env, despite the typescript plugin listing a bunch of errors for every line where I import a SCSS file. Now that I want to move to production however, these errors are blocking my build :-(

For every SCSS import I get a line like this:

[@snowpack/plugin-typescript] src/app/components/close-toggle/close-toggle.ts(1,20): error TS2307: Cannot find module './close-toggle.styles.scss' or its corresponding type declarations.

Below are my snowpack config and the plugin source. If anybody has any idea what might cause this, I'm all ears and very thankful :-)

snowpack.config.js (abbreviated):

module.exports = {
	plugins: [
		'./lit-scss-plugin.js',
		[
			'@snowpack/plugin-sass',
			{
				compilerOptions: {
					loadPath: './src/styles',
				},
			},
		],
		'@snowpack/plugin-typescript',
	],
	packageOptions: {
		types: true,
	}
};

lit-scss-plugin.js (full):

const sass = require('sass');

module.exports = function (snowpackConfig, pluginOptions) {
	return {
		name: 'lit-scss-plugin',
		resolve: {
			input: ['.styles.scss'],
			output: ['.styles.js'],
		},
		async load({ filePath }) {
			const result = sass.renderSync({
				file: filePath,
				includePaths: ['node_modules', 'src/styles'],
				importer: function (url, prev, done) {
					if (url[0] === '~') {
						url = url.substr(1);
					}
					return { file: url };
				},
			});
			return `export default ${JSON.stringify(result.css.toString())}`;
		},
	};
};

[N0tExisting]

Try adding this to types/static.d.ts:

// CSS MODULES
declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}
declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}
declare module '*.module.sass' {
  const classes: { [key: string]: string };
  export default classes;
}
// CSS
declare module '*.css';
declare module '*.scss';
declare module '*.sass';
declare module '*.less';
declare module '*.styl';

[MrCryptoWizard]

Wow.. I had something like that, but not exactly like that 😅

This seems to have solved it! Thanks a bunch for your help!

[MrCryptoWizard]

Ah, I was a bit too quick. The errors disappear, but now the site does not load anymore, giving errors like:
Error: xxx/yyy.styles.scss - Requested content ".styles.js" but only built .js 🤔

[N0tExisting]

You should probably look into this template.
I that used when starting out.