React、Mantine、CSS 模块无法正确加载

Question

我正在与

React

和

TypeScript

开发一个

Mantine

项目。我使用

CSS Modules

来设置组件的样式。然而，在看似随机的时间，CSS 停止加载（据我从

DevTools

观察到），并且网页看起来没有应用 CSS。

当我删除各个组件中

CSS Module

的每个导入、保存更改并重新添加

CSS Module

导入时，网页恢复正常。

我尝试过将

CSS Modules

定义为

global.d.ts

中的模块之类的方法，但到目前为止似乎没有方法有效。

为什么会这样呢？我该如何解决这个问题？

示例组件 (

Title.tsx

):

import styles from './Title.module.css';
import { Text } from '@mantine/core';

interface TitleProps {
  text: string;
}

const Title = ({ text }: TitleProps) => {
  return (
    <>
      <Text className={styles.title}>{text}</Text>
    </>
  );
};

export default Title;

CSS 模块示例 (

Title.module.tsx

):

.title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(180deg, #5c92e2, #1278ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

组件和模块都在同一目录中。我的

import '@mantine/core/styles.css';

文件中也有

index.tsx

。我的

devDependencies

（在

package.json

）包括

"@types/css-modules": "^1.0.5"

。

Answer 1

我通过将 @mantine/core/styles.css

的导入语句

移动到我的index.tsx文件的顶部

来解决了问题。

上一个版本：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Main from './pages/Main';
import '@mantine/core/styles.css'; // wrong order

const router = createBrowserRouter([
  {
    path: '/',
    element: <Main />,
  },
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </React.StrictMode>
);

当前版本：

import '@mantine/core/styles.css'; // correct order
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Main from './pages/Main';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Main />,
  },
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </React.StrictMode>
);