【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法

一、引言

在前端开发中，样式的处理是非常重要的一部分。React 作为一个流行的前端框架，有许多工具和技术可以帮助我们更好地管理和应用样式。create-react-app 是一个方便快捷的创建 React 项目的脚手架工具，它为我们提供了一个良好的开发基础。在实际开发中，我们经常会使用 less 或 sass 这样的预处理器来编写样式，同时也会使用 react-css-modules 来实现样式的模块化管理。本文将详细介绍在 create-react-app 项目中如何使用 less/sass 和 react-css-modules。

二、使用 less/sass

（一）安装相关依赖

要在 create-react-app 项目中使用 less 或 sass，我们首先需要安装相应的依赖。对于 less，我们可以使用以下命令进行安装：

npm install --save-dev less

对于 sass，我们可以使用以下命令进行安装：

npm install --save-dev node-sass

（二）配置 webpack

create-react-app 项目默认使用 webpack 进行打包，我们需要对 webpack 的配置进行一些修改，以支持 less 或 sass 的编译。在项目根目录下找到 config-overrides.js 文件，如果没有则需要手动创建。在这个文件中，我们可以添加以下代码来配置 less 或 sass 的编译：

1. 配置 less

const {
    override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
   
    javascriptEnabled: true,
  })
);

1. 配置 sass

const {
    override, addSassLoader } = require('customize-cra');

module.exports = override(
  addSassLoader({
   
    data: '@import "~your-path-to-sass-variables.scss";',
  })
);

（三）使用 less/sass 编写样式

安装和配置完成后，我们就可以在项目中使用 less 或 sass 来编写样式了。在组件的样式文件中，我们可以使用相应的语法来定义样式。例如，在 less 文件中，我们可以使用以下语法：

@primary-color: #4285f4;

.button {
   
  background-color: @primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

在 sass 文件中，我们可以使用以下语法：

$primary-color: #4285f4;

.button {
   
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

三、使用 react-css-modules

（一）安装依赖

要使用 react-css-modules，我们需要安装相应的依赖。可以使用以下命令进行安装：

npm install --save-dev react-css-modules

（二）配置 webpack

在使用 react-css-modules 之前，我们需要对 webpack 的配置进行一些修改。在项目根目录下找到 config-overrides.js 文件，在其中添加以下代码来配置 react-css-modules：

const {
    override, addDecoratorsLegacy, disableEsLint } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint(),
  {
   
    cssLoaderOptions: {
   
      modules: {
   
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
  }
);

（三）使用 react-css-modules

在组件中使用 react-css-modules 非常简单。我们只需要在引入样式文件时，使用 cssModules 属性来启用样式模块。例如：

import styles from './styles.module.less';

function MyComponent() {
   
  return (
    <div className={
   styles.button}>
      Click me!
    </div>
  );
}

在上面的代码中，我们使用 styles.button 来应用样式。react-css-modules 会根据组件的名称和样式的名称生成一个唯一的类名，从而实现样式的模块化管理。

四、结合使用 less/sass 和 react-css-modules

（一）配置 webpack

要结合使用 less/sass 和 react-css-modules，我们需要对 webpack 的配置进行一些调整。在 config-overrides.js 文件中，我们可以添加以下代码来同时配置 less/sass 和 react-css-modules：

1. 配置 less 和 react-css-modules

const {
    override, addLessLoader, addDecoratorsLegacy, disableEsLint } = require('customize-cra');

module.exports = override(
  addLessLoader({
   
    javascriptEnabled: true,
  }),
  addDecoratorsLegacy(),
  disableEsLint(),
  {
   
    cssLoaderOptions: {
   
      modules: {
   
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
  }
);

1. 配置 sass 和 react-css-modules

const {
    override, addSassLoader, addDecoratorsLegacy, disableEsLint } = require('customize-cra');

module.exports = override(
  addSassLoader({
   
    data: '@import "~your-path-to-sass-variables.scss";',
  }),
  addDecoratorsLegacy(),
  disableEsLint(),
  {
   
    cssLoaderOptions: {
   
      modules: {
   
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
  }
);

（二）使用结合后的样式

在组件中使用结合后的样式时，我们可以同时使用 less/sass 的语法和 react-css-modules 的特性。例如，在 less 文件中，我们可以使用以下语法：

@primary-color: #4285f4;

.button {
   
  background-color: @primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  &:hover {
   
    background-color: darken(@primary-color, 10%);
  }
}

在上面的代码中，我们使用 less 的语法定义了样式，同时也使用了 react-css-modules 的特性来实现样式的模块化管理。

五、总结

在 create-react-app 项目中，使用 less/sass 和 react-css-modules 可以让我们更方便地管理和应用样式。通过安装相关依赖、配置 webpack、结合使用 less/sass 和 react-css-modules 等步骤，我们可以实现样式的预处理器和样式模块的结合，从而提高开发效率和代码质量。希望本文对大家有所帮助，让大家在 create-react-app 项目中能够更好地使用 less/sass 和 react-css-modules。