react-css-modules

蔚落 2021-09-17 08:20 209阅读 0赞

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

Stylus参考实例：[https://github.com/smallH/react-stylus.git][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;

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

这样表示项目中已经可以使用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][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;
    	}
    }

[https_github.com_smallH_react-stylus.git]: https://github.com/smallH/react-stylus.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210813/dca476a6a8714a9dafc36d4b21685e0c.png
[https_www.npmjs.com_package_react-css-modules]: https://www.npmjs.com/package/react-css-modules

react-css-modules

发表评论取消回复

还没有评论，来说两句吧...

相关阅读