如何仅用Babel搭建React环境并为组件添加CSS？

嘿，我来帮你解决这个问题！既然你已经靠Babel搞定了React JSX的转译，现在要给组件加CSS的话，完全可以在纯Babel生态内实现，不用引入Webpack这类打包工具，下面给你两个靠谱的方案：

方案1：用babel-plugin-css-modules-transform处理CSS模块 #

这个插件能让你像导入JS模块一样导入CSS文件，还会自动生成唯一类名避免样式冲突，同时支持服务端渲染时提取样式注入HTML。

步骤： #

1. 安装插件：

npm install --save-dev babel-plugin-css-modules-transform

2. 更新你的Babel配置（比如.babelrc或者babel.config.json）：

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "transform-react-jsx",
    [
      "css-modules-transform",
      {
        "generateScopedName": "[name]__[local]___[hash:base64:5]",
        "extensions": [".css"]
      }
    ]
  ]
}

3. 在React组件中导入并使用CSS：

// MyComponent.jsx
import styles from './MyComponent.css';

export default function MyComponent() {
  return <div className={styles.container}>Hello with CSS Modules!</div>;
}

/* MyComponent.css */
.container {
  background: #e0e0e0;
  padding: 1rem;
  border-radius: 4px;
}

4. 服务端渲染时注入样式：
   这个插件会暴露getCss()方法，用来提取所有组件的CSS代码，你可以在Express路由里把它放到HTML的<style>标签中：

// Express服务器代码
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { getCss } from 'babel-plugin-css-modules-transform';
import MyComponent from './MyComponent';

app.get('/', (req, res) => {
  const componentHtml = ReactDOMServer.renderToString(<MyComponent />);
  const componentCss = getCss();
  
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>React SSR with CSS</title>
        <style>${componentCss}</style>
      </head>
      <body>
        <div id="root">${componentHtml}</div>
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `;
  
  res.send(html);
});

方案2：用styled-components + Babel插件（无独立CSS文件） #

如果你更喜欢把样式和组件写在一起，styled-components是绝佳选择，它的Babel插件能完美支持转译和SSR样式提取，完全在Babel生态内运行。

步骤： #

1. 安装依赖：

npm install styled-components && npm install --save-dev babel-plugin-styled-components

2. 更新Babel配置：

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "transform-react-jsx",
    "styled-components"
  ]
}

3. 在组件中直接编写样式：

// MyComponent.jsx
import styled from 'styled-components';

const Container = styled.div`
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

export default function MyComponent() {
  return <Container>Hello with Styled Components!</Container>;
}

4. 服务端渲染时处理样式：
   styled-components提供了ServerStyleSheet来收集组件样式，你可以在Express里这样用：

// Express服务器代码
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';
import MyComponent from './MyComponent';

app.get('/', (req, res) => {
  const sheet = new ServerStyleSheet();
  
  try {
    const componentHtml = ReactDOMServer.renderToString(
      sheet.collectStyles(<MyComponent />)
    );
    const styleTags = sheet.getStyleTags();
    
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>React SSR with Styled Components</title>
          ${styleTags}
        </head>
        <body>
          <div id="root">${componentHtml}</div>
          <script src="/client-bundle.js"></script>
        </body>
      </html>
    `;
    
    res.send(html);
  } catch (err) {
    console.error('SSR Error:', err);
    res.status(500).send('Server Error');
  } finally {
    sheet.seal();
  }
});

这两个方案都完全符合你的需求——只用Babel及其插件实现带CSS的React组件，不需要额外的打包工具，选哪个就看你偏好独立CSS文件还是样式与组件耦合的写法啦！

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