css modules 的实际使用妙招（与公共组件、less、ts、webpack结合使用）

css modules 是一种将 CSS 与 JavaScript 组件隔离的强大技术，它可以防止样式冲突，并使组件更容易维护和复用。然而，在实际使用中，我们可能会遇到一些疑问，例如如何与公共组件、less、ts和webpack一起使用。本文将详细解答这些疑问，帮助你充分发挥 css modules 的优势。

与公共组件一起使用

当使用 css modules 时，我们可能需要覆盖公共组件中已有的样式。此时，可以使用以下方法：

1. 使用 :global 覆盖： 通过在样式表中添加 :global 规则，可以覆盖公共组件中的样式。例如：

:global(.public-component) {
  background-color: red;
}

2. 通过父组件覆盖： 如果公共组件嵌套在当前组件中，可以通过父组件的样式表来覆盖公共组件的样式。例如：

// 父组件的样式表
.my-component {
  .public-component {
    background-color: red;
  }
}

与 less 一起使用

css modules 也支持与 less 一起使用。要做到这一点，需要在 webpack 配置中安装和配置 less 加载器。安装 less 加载器后，就可以在样式表中使用 less 语法。例如：

// my-component.less
.my-component {
  @color: red;

  background-color: @color;
}

与 ts 一起使用

css modules 同样支持与 ts 一起使用。要做到这一点，需要在 webpack 配置中安装和配置 ts 加载器。安装 ts 加载器后，就可以在样式表中使用 ts 语法。例如：

// my-component.module.ts
import { css } from 'styled-components';

const styles = css`
  background-color: red;
`;

export default styles;

与 webpack 一起使用

在 webpack 中，无需再配置两条规则来使用 css modules。webpack 4 及以上版本已经内置了对 css modules 的支持。只需要在 webpack 配置中安装 css-loader 即可。例如：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
    ],
  },
};

结论

css modules 是一项强大的技术，可以大大提高代码的可维护性和可复用性。通过本文中介绍的技巧，你可以充分发挥 css modules 的优势，将其与公共组件、less、ts和webpack一起使用，以创建高效、可扩展的应用程序。