如何基于Parcel搭建React 16组件隔离SCSS环境

嘿，好消息——Parcel其实原生支持CSS Modules，完全不用额外配置Webpack那套复杂的loader，只需要简单几步就能实现你想要的组件样式隔离效果，和Angular的组件样式隔离、Webpack的CSS Modules效果一致。

下面是具体的实现步骤：

1. 重命名样式文件启用CSS Modules #

Parcel会自动识别命名为[name].module.scss（或.module.css）的文件，并对其启用CSS Modules转换。所以你只需要把每个组件的样式文件改成这种命名格式就行：

• 比如Button组件的样式文件叫Button.module.scss
• Card组件的样式文件叫Card.module.scss

2. 在React组件中导入并使用样式 #

在组件文件里，把样式文件作为模块导入，然后通过导入的对象来引用类名：

// Button.jsx
import React from 'react';
// 导入样式模块
import styles from './Button.module.scss';

const Button = () => {
  // 使用styles对象里的类名
  return <button className={styles.button}>点击我</button>;
};

export default Button;

对应的Button.module.scss内容：

.button {
  padding: 8px 16px;
  background: blue;
  color: white;
  border: none;
  border-radius: 4px;
}

3. 验证样式隔离效果 #

假设你还有一个Card组件，它的Card.module.scss里也有一个.button类：

// Card.module.scss
.button {
  padding: 4px 8px;
  background: gray;
  color: black;
  border: 1px solid #ccc;
}

当Parcel编译后，两个.button类会被转换成类似Button_button__abc123和Card_button__def456这样的唯一哈希类名，完全不会互相干扰，每个组件只会应用自己的样式。

4. 全局样式的处理（可选） #

如果某个样式需要全局生效（比如全局重置样式），不需要被哈希化，可以在样式文件里使用:global()伪类包裹：

// global.module.scss
:global(.reset) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

然后在组件里直接用普通的类名引用：<div className="reset"></div>

为什么这样可行？ #

Parcel的设计理念就是"零配置"，它内置了对CSS Modules的支持，只要你遵循.module.css/scss的命名约定，就会自动帮你处理类名的哈希化和样式隔离，省去了Webpack里配置css-loader的麻烦。

这样配置后，你的每个React组件就都拥有了独立隔离的样式，和你在Angular里看到的效果完全一致啦！

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