TypeScript declare specific SCSS module

Question

I'm trying to declare a specific SCSS module to import from TypeScript. I have this declaration file that is working well:

declare module '*.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}

But I'd like to narrow down *.scss somehow so that this declaration file only applies to the SCSS file _variables.scss which is located in the same directory.

I have tried to replace *.scss with _variables.scss or ./_variables.scss but then TypeScript wasn't able to find the module declaration at all.

Is this possible with TypeScript?

Josh Aguilar · Accepted Answer · 2021-02-11 23:53:15Z

3

You can do your module declaration like this. Read more on wildcard module declarations here.

declare module '*_variables.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}

answered Feb 11, 2021 at 23:53

Josh Aguilar

2,2911 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

heroxav Over a year ago

do you know why it won't allow an exact path? I would like to receive TS errors when I import _variables.scss from the wrong location. Do you know if this is possible with TS at all? I don't see any explicit note of this in the docs.

SVANSKI · Accepted Answer · 2021-02-17 11:15:25Z

I tested different cases to import _variables.scss. I think @JoshA's answer is a great way to be flexible with different (absolute, relative) paths of your file. However, as you mentioned in a comment, you would like to get TS errors when you import _variables.scss from the wrong location.

For this purpose, I created a folder assets in the root directory. I created then _variables.scss and _variables.d.ts in assets folder. Then, I included './_variable.d.ts' in types of tsconfig.json.

root
   /assets
          _variables.dt.ts
          _variables.scss

In my tests, I realised that it is important to have an absolute path, which you will later use for importing _variables.scss in your .ts files. For example, I use Nuxt.js and you can define there root path by ~. If I need to import _variables.scss, I will always use

//someFile.ts
import SomeVariableName from `~/assets/_variables.scss`

Therefore, if I define my _variables.d.ts file as shown below, everything will work, as you need.

//_variables.d.ts
declare module '~/assets/_variables.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}

As you see, the path to _variables.scss is exactly the same for import and declare statements: ~/assets/_variables.scss. You will not be able to import the file with relative paths. For example, these would not work:

import SomeVariable from '../assets/_variables.scss'
import SomeVariable from './assets/_variables.scss' 
import SomeVariable from '../_variables.scss'
import SomeVariable from './_variables.scss'

To conclude, if you define in declare module 'Absolute-Path-of-_variables.scss-File-As-You-Import-It-In-Other-.ts-files' {} absolute path to _variables.scss and import it with the same path in .ts files, everything should work for your purpose.

felixmosh · Accepted Answer · 2020-10-12 08:51:28Z

0

Try to put the entire path of the import in the declare module.

So if your file exists in ../foo/bar/_variables.scss

make the declare

declare module '../foo/bar/_variables.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}

answered Oct 12, 2020 at 8:51

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

1 Comment

heroxav Over a year ago

that this approach doesn't work is exactly the problem I'm facing. The SCSS file is located in the same directory as the module declaration file. So ./_variables.scss should work as a relative path, but does not.

Collectives™ on Stack Overflow

TypeScript declare specific SCSS module

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related