如何在Framer中导入CSS模块？组件构建MIME类型报错求助

Framer的构建环境对CSS资源的处理逻辑和本地开发工具（如Webpack/Vite）不同，直接在JS组件中导入.css文件会被当作JavaScript模块解析，从而触发MIME类型不匹配的错误。以下是两种可行的解决办法：

方法1：全局样式中引入（推荐） #

在Framer项目的全局样式里通过@import引入Mantine的CSS文件：

1. 打开Framer编辑器左侧的「Global Styles」面板
2. 点击「Add Code」并选择「CSS」类型
3. 输入以下代码：

@import "@mantine/core/styles.css";
@import "@mantine/carousel/styles.css";

方法2：JS动态注入样式 #

如果全局样式导入受限，可以在组件内通过JavaScript动态创建link标签加载样式：

import { useEffect } from 'react';

export default function YourMantineComponent() {
  useEffect(() => {
    // 加载Mantine Core样式
    const coreLink = document.createElement('link');
    coreLink.rel = 'stylesheet';
    coreLink.href = '@mantine/core/styles.css';
    document.head.appendChild(coreLink);

    // 加载Mantine Carousel样式
    const carouselLink = document.createElement('link');
    carouselLink.rel = 'stylesheet';
    carouselLink.href = '@mantine/carousel/styles.css';
    document.head.appendChild(carouselLink);

    // 组件卸载时清理样式标签
    return () => {
      document.head.removeChild(coreLink);
      document.head.removeChild(carouselLink);
    };
  }, []);

  // 你的组件内容
  return <div>...</div>;
}

本地开发时工具会自动处理CSS导入的打包，但Framer构建流程不支持这种JS内直接导入CSS的语法，改用上述两种方式即可避免MIME类型错误。

内容的提问来源于stack exchange，提问作者Laczkó Örs