从零搭建React + TS组件库（二）：Less模块化与SVG引入配置

前言

在上一篇《从零搭建React + TS组件库（一）：项目搭建与封装Antd组件》中，我们已经介绍了如何使用Webpack来搭建一个基于Antd的组件库的基本框架。但是在实际的开发中，组件库通常还需要处理一些其他的问题，比如CSS模块化、SVG图标引入等。本文将详细介绍如何在React + TS组件库中使用Less进行模块化和引入SVG图标的配置，帮助你构建更健壮、可复用的组件库。

Less模块化

Less是一种流行的CSS预处理器，它可以帮助我们实现CSS模块化，从而使我们的代码更易于维护和管理。在React + TS组件库中，我们可以使用Less来实现组件的样式模块化，从而避免样式污染的问题。

安装Less

首先，我们需要在项目中安装Less及其相关的依赖包。

npm install less less-loader --save-dev

配置Less

在Webpack的配置文件中，我们需要配置Less的处理规则。

module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    }
  ]
}

使用Less

在组件中，我们可以使用Less来编写样式。

import { style } from 'styled-components';

const Button = style.button`
  color: red;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
`;

SVG图标引入

在React + TS组件库中，我们也经常需要使用SVG图标。我们可以使用Webpack的svg-loader来将SVG图标编译成JavaScript模块，然后在组件中使用。

安装svg-loader

首先，我们需要在项目中安装svg-loader。

npm install svg-loader --save-dev

配置svg-loader

在Webpack的配置文件中，我们需要配置svg-loader的处理规则。

module: {
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'svg-loader',
          options: {
            svgo: {
              plugins: [
                {
                  removeAttrs: {
                    attrs: 'fill'
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

使用SVG图标

在组件中，我们可以使用import语句来引入SVG图标。

import Logo from './logo.svg';

const Header = () => {
  return (
    <header>
      <Logo />
    </header>
  );
};

总结

在本文中，我们介绍了如何在React + TS组件库中使用Less进行模块化和引入SVG图标的配置。这些技术可以帮助我们构建更健壮、可复用的组件库。