导入sass:在Next.js中导出variables

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')],
}
});

如果我直接用import '../styles/global.scss'导入scs，导入是有效的，但它们当然不是我可以评估的变量。

Answer 1

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

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