react-css-modules

在开发 react 项目中，有些项目需要设置大量的样式文件，如果通过定义样式常量，纯嵌入的方式编写样式，这将会大大的降低效率。stylus + react-css-modules 是一套可以提高样式编写效率的方案。stylus 是一套 css 预处理框架，而react-css-modules 则实现了样式的模块化。

Stylus参考实例：https://github.com/smallH/react-stylus.git

那么我们一步步来，在使用 stylus 前需要先安装相应依赖包：

安装stylus及其依赖包：

$ npm install stylus -S
$ npm install stylus-loader -S

在react项目中使用stylus，需要将其配置文件暴露出来，到项目根目录下，执行脚本（执行前记得先提交代码备份，以防万一）：

$ npm run eject

执行这段脚本时，会询问您是否确认暴露，该过程是不可逆的，选择 ‘Y’ 即可。若在执行过程发生错误，会提示错误信息。常见的错误是提示你需要删掉项目中的跟踪文件，如使用HBuilder编译器时会随项目创建时生成.project跟踪文件。

在配置文件暴露出来后，打开config/webpack.config.dev.js，修改配置如下：

module: {
    strictExportPresence: true,
    rules: [
        ...
         oneOf: [ 
            ...
            {
            test: /\.styl$/, 
            loaders: ['style-loader', 'css-loader', 'stylus-loader']
            },
            {
                // Exclude `js` files to keep "css" loader working as it injects
                // its runtime that would otherwise be processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.styl$/],
                loader: require.resolve('file-loader'),
                options: {
                    name: 'static/media/[name].[hash:8].[ext]',
                },
            }
         ]
    ]
    ...
}

打开config/webpack.config.prod.js，按上面的办法同样修改一遍，这样build出来的文件.styl文件才会有效。

（小贴士）若想要build后能双击打开index.html就可以看到页面，则把修改publicPath为：

const publicPath = './';

执行以下代码测试效果：

// base.styl
div{
    color: red;
    p {
        color: blue;
    }
}
// App.js
import React from 'react';
import './base.styl';
class App extends React.Component {
    render() {
        return(
            <div>
                  Hello World!
                  <p>This is Paragraph!</p>
             </div>
        );
    }
}
export default App;

启动项目，效果如图所示：

这样表示项目中已经可以使用Stylus。但这种引用方法有个缺点，所引用的样式将会是全局样式，所有的组件都会影响到，这种效果并不是我们想要的，所以这时候我们需要用到样式模块化管理 react-css-modules。

安装 react-css-modules：

$ npm install react-css-modules -S

再次打开config/webpack.config.dev.js，修改配置如下：

{
    test: /\.styl$/,
    loaders: [
        'style-loader',
        'css-loader?modules&localIdentName=[name]-[hash:base64:5]',
        'stylus-loader'
    ]
},
{
    // Exclude `js` files to keep "css" loader working as it injects
    // its runtime that would otherwise be processed through "file" loader.
    // Also exclude `html` and `json` extensions so they get processed
    // by webpacks internal loaders.
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.styl$/],
    loader: require.resolve('file-loader'),
    options: {
        name: 'static/media/[name].[hash:8].[ext]',
    },
}

这样就可以使用 react-css-modules 实现对样式的模块化管理了，需要了解 react-css-modules 的api可以到官网去看一下文档 ，官网地址：https://www.npmjs.com/package/react-css-modules。下面是一个简单是使用实例：

import React from 'react'
import styles from './index.styl'
import CSSModules from 'react-css-modules'
import { connect } from 'react-redux'
import * as AllActions from '@/reducers/Auth/actions'
class Login extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    visitor = () => {
        // some code about visitor 
    }
    manager = () => {
                // some code about manager 
    }
    render() {
        return(
            <div id="login" styleName="login">
                <div styleName="title">欢迎您</div>
                <div styleName="nav">
                    <div styleName="btn" onClick={this.visitor}>游客</div>
                    <div styleName="btn manager" onClick={this.manager}>管理员</div>
                </div>
            </div>
        );
    }
}
const CSSLogin = CSSModules(Login, styles, {
    allowMultiple: true
});
// connect 是redux中的模块，如果没有用到则直接导出CSSLogin即可
export default connect(null, AllActions)(CSSLogin)

样式文件：

// index.styl
.login{
    .title {
    text-align: center;
    font-size: 46px;
    font-weight: bold;
    margin-top: 200px;
    }
    .nav {
        display: flex;
        margin-top: 50px;
        justify-content: center;
        align-items: center;
    }
    .btn {
        min-width: 140px;
        text-align: center;
        font-size: 24px;
        cursor: pointer;
        border-radius: 30px;
        background-color: #009688;
        color: white;
        width: fit-content;
        padding: 10px;
        margin-top: 0px;
    }
    .manager {
        margin-left: 20px;
        color: gray;
        background-color: transparent;
        border: solid 1px #009688;
    }
}