Vue Cli 3 Typescript. Cannot import css/sass to the <script> block

Question

I built new vue app with typescript using Vue Cli 3.

When I try to import css or sass to my typescript file:

import * as sassStyles from '@/assets/sass/my.module.scss';

I got followning error:

Cannot find module

I found this article How to use CSS Modules with TypeScript and webpack but I have no idea how to integrate it with Vue Cli 3 who is abstracting away webpack config.

Any idea what to put in vue.config.js to able to import css and sass files directly to block?

I need to use typings-for-css-modules-loader instead of css-loader.

Answer 1

Importing the file itself (i.e., import '@/foo.scss') will automatically apply the styles to the current component, so you don't actually need a reference to the imported styles. That is:

// import * as sassStyles from '@/assets/sass/my.module.scss'; // DON'T DO THIS
import '@/assets/sass/my.module.scss';

demo

The only steps needed to add support for importing Sass files in a vue-cli project is to install sass and sass-loader (no additional config needed):

npm i -S sass sass-loader

Then, you could use either of the following methods to import a .scss file:

• <script> import:

<script>
  import '/path/to/foo.scss';
</script>

• <style src>:

<style scoped src="/path/to/foo.scss" lang="scss"></style>

Note the optional scoped attribute makes the styles apply to the current component only (like CSS Modules).

Answer 2

Create a file in your project, say ambient.d.ts (my convention but you can call it anything), with the following:

declare module "@/assets/sass/*.scss" {
  const styles: any;
  export = styles;
}

declare module "@/assets/css/*.css" {
  const styles: any;
  export = styles;
}

adjust the type and form of the export to best match your usage.