typescript - 在 Next.js 中导入 sass :export varaiables

Question

在我的 Next.js 应用程序中，我包含一个接受主题颜色作为参数的组件。

我已经定义了 sass 变量

$primary: #f00;

:export {
  primary: $primary;
}

pages/index.tsx我喜欢导入

import colors from '../styles/_variables.scss'

然后我可以（理论上）color.primary在我的组件中使用。

在 IDE 中，我收到 ts 错误：Cannot find module '../styles/_variables.scss' or its corresponding type declarations.

我的 next.config.js 文件看起来像这样

const withSass = require('@zeit/next-sass')
const path = require("path")

module.exports = withSass({
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  }
});

如果我直接使用导入工作导入 scss import '../styles/global.scss'，但当然它们没有定义为我可以评估的变量。

Answer 1

这只是一个 TypeScript 警告。您可以将任何 scss 导入声明为模块以满足 TypeScript。

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