typescript - 导入 sass :export varaiables in Next. js

Question

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

我在 la 定义了 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')],
  }
});

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

Answer 1

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

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