在Vue中将scss变量导入打字稿答案

【问题标题】：Import scss variables into typescript in Vue在Vue中将scss变量导入打字稿
【发布时间】：2021-01-20 04:44:34
【问题描述】：

我正在尝试将 SASS (scss) 变量导入到 typescript Vue 3 项目中的 javascript 中：

// @/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";'
      }
    }
  }
};

但我收到的是Cannot find module '@/assets/styles/_export.scss' or its corresponding type declarations.。

有什么想法吗？

谢谢

【问题讨论】：

标签： typescript vue.js sass

【解决方案1】：

在 scss 中导入部分类时，不要包含下划线。试试这个：

import colors from "@/assets/styles/export.scss";

【讨论】：

【解决方案2】：

我在src 目录中创建了一个名为shims-scss.d.ts 的声明文件。

// shims-scss.d.ts

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

我可以从scss 文件中导入一个对象，就像你写的_exports.scss 一样。

【讨论】：

这真的很有帮助！谢谢。 @Michael Bernares