javascript - 使用 NextJS 将 SASS 变量导入 Material UI 主题

Question

在我的项目中，我有以下文件:
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;

调色板.scss

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

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

我想对这些文件进行重复数据删除。我以为我可以从 导入变量调色板.scss 进入 materialTheme.ts 但是 Next.JS 抛出一个关于只将全局 CSS 导入 的错误。 _app.tsx
materialTheme.ts(不工作)

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

import palette from "./palette.scss";

const theme: Theme = createMuiTheme({
  palette: {
    primary: { main: palette.primary, contrastText: palette.contrast },
    secondary: { main: palette.secondary, contrastText: palette.contrast },
  },
});

export default theme;

有什么方法可以让 NextJS 忽略这个错误，只是为了 materialTheme.ts 并正确导入变量？
我想我可以确定 const theme在我的 _app.tsx 然后导入 调色板.scss 在那里，但理想情况下，我想为主题和应用程序维护单独的文件。
或者，是否有任何模式可以在遵守此无全局 CSS 规则的同时将 Javascript 变量导入 SCSS 文件或将 SCSS 变量导入 Javascript 文件？

Answer 1

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