Import scss variables into typescript in Vue

Question

I'm trying to import SASS (scss) variables in to the javascript in typescript Vue 3 project:

// @/assets/styles/colors.scss
$white: #fff;

// @/assets/styles/_exports.scss
@import "./colors.scss";

:export {
  white: $white;
}

<template>
  <div>
  </div>
</template>
<script lang="ts">
import colors from "@/assets/styles/_export.scss";
</script>

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/assets/styles/colors.scss";'
      }
    }
  }
};

But I'm getting Cannot find module '@/assets/styles/_export.scss' or its corresponding type declarations..

Any ideas pls?

Thanks

Michael Benares · Accepted Answer · 2020-10-05 10:35:30Z

10

I created a declaration file named shims-scss.d.ts in src directory.

// shims-scss.d.ts

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

It worked for me to import an object from a scss file like as _exports.scss you wrote.

answered Oct 5, 2020 at 10:35

Michael Benares

1261 silver badge3 bronze badges

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

Comments

VladStepu2001 · Accepted Answer · 2024-07-17 12:03:19Z

0

In addition to Michael Benares's answer, for Vue 3 project created with Vue CLI, I also had to name the file as "_name.module.scss" (hence ".module") in order to able to import the style to TypeScript.
Without that, the imported object was undefined.

The source - https://stackoverflow.com/a/71942017/12136394

answered Jul 17, 2024 at 12:03

VladStepu2001

1712 silver badges10 bronze badges

Collectives™ on Stack Overflow

Import scss variables into typescript in Vue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related