CSS Modules使用方法

矫情吗；* 2022-04-17 02:42 134阅读 0赞

## css模块化解决方案 ##

*  抛弃css (Radium,jsxstyle,react-style)
 *  利用js来管理样式依赖(css Modules)

## css模块化面临的问题 ##

*  全局污染
 *  命名混乱
 *  依赖管理不彻底
 *  无法共享变量
 *  代码压缩不彻底

## 启用CSS Modules,webpack配置 ##

...
    {
        test: /\.css$/,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader?modules&localIdentName=[name]-[hash:base64:5]'
            }
        ]
    },
    ...

## 在项目当中使用 ##

### Test.jsx ###

import React, { Component } from 'react';
    // 将样式文件当成模块引入
    import styles from "./test.css";
    
    export default class Test extends Component {
        render() {
            return (
                <div>
                    <div className={styles.test}>测试</div>
                </div>
            )
        }
    }

### test.css ###

.test {
        color: red;
    }

以上就是CSS Modules的基本用法

## 用法进阶 ##

### 全局样式和局部样式 ###

开启CSS Modules之后默认的样式都为局部样式

// css 样式
    (:global)(.test1) {
        color: blue;
    }
    或者如下(定义多个全局样式)
    :global {
        .test1 {
            color: blue;
        }
        .test2 {
            color: red;
        }
    }
    
    // 全局样式写法和之前一样
    import React, { Component } from 'react';
    import styles from "./test.css";
    export default class Test extends Component {
        render() {
            return (
                <div>
                    <div className="test1">测试</div>
                </div>
            )
        }
    }

### Compose 组合样式 ###

// 样式文件
    .base { 
        font-size: 20px;
     }
    
    .normal {
      composes: base;
      color: #333;
    }
    
    .disabled {
      composes: base;
      color: #ddd;
    }
    // 组件中
    import React, { Component } from 'react';
    import styles from "./test.css";
    export default class Test extends Component {
        render() {
            return (
                <div>
                    <div className="normal">测试</div>
                </div>
            )
        }
    }
    // 编译后的html文件
    <d class="div--base-daf62 div--normal-abc53">测试</div>
    // 由于在 .normal 中 composes 了 .base，编译后会 normal 会变成两个 class。

## CSS Modules 使用技巧 ##

*  不使用选择器，只使用class名来定义样式
 *  不叠加多个class
 *  所有样式通过composes组合来实现复用
 *  不嵌套

## CSS Modules React 项目实践 ##

import classNames from 'classnames';
    import styles from './dialog.css';
    
    export default class Dialog extends React.Component {
      render() {
        const cx = classNames({
          [styles.confirm]: !this.state.disabled,
          [styles.disabledConfirm]: this.state.disabled
        });
    
        return <div className={styles.root}>
          <a className={cx}>Confirm</a>
          ...
        </div>
      }
    }

## 关于样式覆盖问题 ##

### 因为CSS Modules 不会覆盖属性选择器,所以可以利用属性选择器来解决这个问题 ###

// 组件中
    ...
    return (
        <div data-role='test'>
            测试
        </div>
    )
    ...
    // 样式
    [data-role="test"] {
        color: red;
    }

## 如何与全局样式共存 ##

import Component from './view/Component'
    // 全局样式
    import './styles/app.scss';
    // 以下为组件相关样式(局部样式)
    import './Component.scss';

## SASS与CSS Modules配合使用 ##

module: {
      loaders: [{
        test: /\.jsx?$/,
        loader: 'babel'
      }, {
        test: /\.scss$/,
        exclude: path.resolve(__dirname, 'src/styles'),
        loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]!sass?sourceMap=true'
      }, {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src/styles'),
        loader: 'style-loader!css-loader!sass-loader?sourceMap=true'
      }]
    }