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;
	}
}