如何在Gatsby项目中集成react-scoped-css？

1. 安装必要依赖 #

首先安装react-scoped-css核心包，以及配套的babel插件和webpack loader：

npm install react-scoped-css babel-plugin-react-scoped-css scoped-css-loader --save-dev
# 或者用yarn
yarn add react-scoped-css babel-plugin-react-scoped-css scoped-css-loader -D

2. 配置Gatsby的Webpack规则 #

在项目根目录的gatsby-node.js文件中（如果没有就新建一个），添加Webpack配置修改逻辑，让Gatsby识别并处理带作用域的CSS文件：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig();

  // 定位到Gatsby默认的CSS处理规则
  const cssRule = config.module.rules.find(rule => rule.test.test('.css'));

  // 将scoped-css-loader添加到CSS处理链的末尾
  cssRule.use.push({
    loader: require.resolve('scoped-css-loader'),
  });

  // 替换原有Webpack配置
  actions.replaceWebpackConfig(config);
};

3. 配置Babel插件 #

有两种方式配置babel插件，选其一即可：

• 方式一：修改gatsby-config.js
  在gatsby-config.js中添加babel插件配置：

  module.exports = {
    // ...你的其他Gatsby配置
    plugins: [
      // ...其他已有的插件
      {
        resolve: 'gatsby-plugin-babel',
        options: {
          plugins: ['babel-plugin-react-scoped-css'],
        },
      },
    ],
  };
  

• 方式二：创建/修改.babelrc
  在项目根目录新建或编辑.babelrc文件：

  {
    "plugins": ["babel-plugin-react-scoped-css"]
  }
  

4. 在组件中使用带作用域的样式 #

创建组件和对应的样式文件，注意样式文件名必须以.scoped.css结尾：
比如src/components/ProfileCard.js：

import React from 'react';
import './ProfileCard.scoped.css';

const ProfileCard = () => {
  return (
    <div className="card-container">
      <h2 className="card-title">我的个人卡片</h2>
      <p className="card-desc">这是仅作用于当前组件的样式</p>
    </div>
  );
};

export default ProfileCard;

对应的ProfileCard.scoped.css：

.card-container {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  max-width: 300px;
}

.card-title {
  color: #2d3748;
  margin-top: 0;
}

.card-desc {
  color: #4a5568;
  font-size: 14px;
}

注意事项 #

• 只有后缀为.scoped.css的文件会被处理为作用域样式，全局样式文件不要使用这个后缀
• 如果使用Sass/Less等预处理器，需要调整Webpack配置，将scoped-css-loader添加到预处理器loader的后方
• 避免在作用域样式中使用!important，以免破坏作用域隔离的效果

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