React CSS模块化的解决方案

一、BEM与命名空间来规范CSS

BEM(block-element-modifer)方法论 + 约定项目命名空间<component (c-), object(o-)>

参考：https://juejin.im/post/5b20e8e0e51d4506c60e47f5

二、webpack中使用local scope

参考：https://juejin.im/post/5b234e25e51d45588016caa0

配置：

// 在webpack中的css-loader中进行配置
{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        localIdentName: '[local]__[name]--[hash:base64:5]'
    }
}

使用场景：

// index.css
:local .title {
    font-size: 30px;
    color: #333;
}

// other.css
:local .title {
    font-size: 15px;
    color: #999;
}

// index.js
import styles from './index.css';
import others from './other.css';

funciont createTitle(str) {
    var title = document.createElement('h1');
    title.appendChild(document.createTextNode(str));
    // styles.title  font-size: 30px;color: #333;
    title.setAttribute('class', styles.title);
    document.body.appendChild(title);
}

createTitle('Hi!');

// 注意点：
1. 使用 :local标识
2. 注意引入方式：import others from '' 不在时 import ''
3. 使用方式：“styles.title”、title.setAttribute('class', styles.title);

// 如果希望 选择器中的某一部分仍然是“全局”的， 如下操纵
:local .title :global(.sub-title) { color: #666; }

三、使用styled-components来解决

参考：https://juejin.im/post/5b2351946fb9a00e5a4b4d79

安装：styled-components

简单来说，就是在你使用styled-components进行样式定义的同时，你也就创建了一个React组件。来先看一下它基本语法：

import styled from 'styled-components';

const ListWrap = styled.ul`
    margin: 0;
    padding: 0;
`;

const Item = styled.li`
    margin: 10px 0;
    padding: 5px 15px;
    border-left: 3px solid #333;
    font-size: 16px;
    list-style: none;
    font-weight: bold;
`;

四、TS下使用typings-for-css-modules-loader + css-loader(0.x版本 or 1.x版本) 在webpack中配置

{
    loader: 'typings-for-css-modules-loader',
    options: {
        localIdentName: '[local]_[hash:base64:8]',
        modules: true,
        namedExport: true,
        camelCase: true,
        sass: true,
        sourceMap: false
    }
}

// 配置typings文件  与src 目录同级 生成一个 声明文件， 假设你用的时 sass
// typed-css-modules.d.ts
declare module '*.scss' {
    const content: any
    export = content
}

//tsconfig.json中 添加 "./typings" <可能需要安装"@types/node">
"typeRoots": ["node", "node_modules/@types", "./typings"]

如果你用的是高版本的 css-loader  比如3.x版本的  要么降低版本，要不改换上面的方案，遇到的错误：

https://segmentfault.com/q/1010000020143819

原因在于 typings-for-css-modules-loader 版本  没有随着css-loader的升级而升级

后续将继续跟进这个问题，寻找最佳实践