如何在Turborepo monorepo中复用CSS文件？

当然可以在Turborepo中实现通用CSS文件的复用，以下是两种贴合你需求的实现方案：

方案一：通过ui包入口自动引入全局CSS（匹配你期望的import 'ui'写法） #

这种方式能让你只需导入ui包，就能自动加载全局CSS，完全符合你想要的导入形式：

1. 修改packages/ui/index.tsx，在入口文件顶部引入全局CSS：

// packages/ui/index.tsx
import './global.css';

// 保留你的其他导出内容（如组件、工具函数等）
export { Button } from './Button';
// ...

2. 确保packages/ui/package.json中正确配置入口字段，让client项目能识别包的入口：

{
  "name": "ui",
  "version": "0.0.1",
  "main": "./index.tsx",
  "module": "./index.tsx",
  "type": "module"
}

3. 在apps/client/index.tsx中直接导入ui包即可：

// apps/client/index.tsx
import React from 'react';
import 'ui'; // 自动引入ui包的global.css及其他导出内容

function App() {
  return <div>你的应用内容</div>;
}

export default App;

方案二：直接从ui包导入指定CSS文件 #

如果你希望更灵活地单独导入CSS文件，可以采用这种方式：

1. 确保packages/ui/package.json的基础配置正确：

{
  "name": "ui",
  "version": "0.0.1"
}

2. 在apps/client/index.tsx中直接指定CSS文件路径导入：

// apps/client/index.tsx
import React from 'react';
import 'ui/global.css';

function App() {
  return <div>你的应用内容</div>;
}

export default App;

关键注意事项 #

• 构建工具兼容性：确保client项目的构建工具（Vite、Webpack、Next.js等）支持从monorepo包导入CSS。若遇到路径解析问题，可在client的配置文件中添加路径映射，比如Vite的vite.config.ts：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        'ui': '../packages/ui'
      }
    }
  });
  

• 预处理CSS支持：如果使用Sass/Less等预处理器，需确保构建工具配置了对应插件，保证ui包中的预处理CSS能被正确解析。

内容的提问来源于stack exchange，提问作者Jimmy