Javascript 使用NextJS将SASS变量导入材质UI主题

在我的项目中，我有以下文件：

materialTheme.ts

import { createMuiTheme, Theme } from "@material-ui/core/styles";

const theme: Theme = createMuiTheme({
  palette: {
    primary: { main: "#209dd2", contrastText: "#fff" },
    secondary: { main: "#81B44C", contrastText: "#fff" },
  },
});

export default theme;

$primary: #209dd2;
$secondary: #81b44c;
$contrast: #fff;

:export {
  primary: $primary;
  secondary: $secondary;
  contrast: $contrast;
}

调色板.scss

import { createMuiTheme, Theme } from "@material-ui/core/styles";

const theme: Theme = createMuiTheme({
  palette: {
    primary: { main: "#209dd2", contrastText: "#fff" },
    secondary: { main: "#81B44C", contrastText: "#fff" },
  },
});

export default theme;

$primary: #209dd2;
$secondary: #81b44c;
$contrast: #fff;

:export {
  primary: $primary;
  secondary: $secondary;
  contrast: $contrast;
}

我想消除这些文件的重复。我原以为可以将变量从调色板.scss导入materialTheme.ts中，但Next.JS抛出了一个错误，即只将全局CSS导入\u app.tsx

materialTheme.ts（不工作）

是否有任何方法可以让NextJS忽略materialTheme.ts的错误，并正确导入变量

我想我可以在我的\u app.tsx中确定

const theme

，然后在那里导入palete.scss，但理想情况下，我希望为主题和应用维护单独的文件

---

或者，是否有任何模式可以将Javascript变量导入SCSS文件或将SCSS变量导入Javascript文件，同时遵守此非全局CSS规则？

您可以将

palete.SCSS

重命名为

palete.module.SCSS

，以遵循Next.js使用的CSS模块命名约定。这告诉Next.js Sass文件是本地范围的，可以在应用程序中的任何位置导入。

哦，天哪，这太明显了！非常感谢。出于某种原因，尽管在整个项目中使用组件和页面模块，但我不认为也要将它们应用到主题中