create-react-app+antd+react-css-modules配置

前端之家收集整理的这篇文章主要介绍了create-react-app+antd+react-css-modules配置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

快速开始:

  1. npminstall-gcreate-react-app /*安装create-react-app*/
  2.  
  3. npminstall-gcreate-react-app /*安装yarn*/
  4.  
  5. create-react-appmyapp /*使用命令创建应用,myapp为项目名称*/
  6.  
  7. cdmyapp /*进入目录 */
  8.  
  9. yarn start /* 启动项目 */

按以上执行,即可快速创建React开发环境。

打开http://localhost:3000/ 查看

环境配置:

生成项目后,脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件,此时查看myapp文件夹目录,会发现找不到任何webpack配置文件。执行以下命令:

  1. yarn eject

再查看myapp 文件夹,可以看到完整的项目结构:

  1. myapp/
  2.  
  3. node_modules/
  4.  
  5. package.json
  6.  
  7. .gitignore
  8.  
  9. config/
  10.  
  11. paths.js
  12.  
  13. polyfills
  14.  
  15. env.js
  16.  
  17. webpack.config.dev.js /* 开发环境配置文件 */
  18.  
  19. webpack.config.prod.js /* 生产环境配置文件 */
  20.  
  21. public/
  22.  
  23. index.html /*入口html文件*/
  24.  
  25. scripts/
  26.  
  27. build.js
  28.  
  29. start.js
  30.  
  31. test.js
  32.  
  33. src/
  34.  
  35. App.js
  36.  
  37. index.js /*主入口文件*/

antd配置

  1. yarn add antd babel-plugin-import

按需引入

为减少打包后体积以及方便书写,可用babel-plugin-import插件,配置在config目录下,

webpack.config.dev.js 和 webpack.config.prod.js文件,这里以webpack.config.dev.js举例,

webpack.config.prod.js一样配置即可:

  1. // Process JS with Babel.
  2. {
  3. test: /\.(js|jsx)$/,include: paths.appSrc,loader: require.resolve('babel-loader'),options: {
  4. // 改动: 添加 antd 按需加载文件处理插件
  5. plugins: [
  6. //['react-html-attrs'],//添加babel-plugin-react-html-attrs组件的插件配置
  7. // 引入样式为 css
  8. ['import',{ libraryName: 'antd',style: 'css' }],// 改动: 引入样式为 less
  9. // ['import',style: true }],],// This is a feature of `babel-loader` for webpack (not Babel itself).
  10. // It enables caching results in ./node_modules/.cache/babel-loader/
  11. // directory for faster rebuilds.
  12. cacheDirectory: true,},

引入模块如下:

  1. // scr/App.js
  2. import React,{ Component } from 'react';
  3. - import Button from 'antd/lib/button';
  4. + import { Button } from 'antd';
  5. import './App.css';

CSS Modules 配置

antd 和 css modules 不能混用,看知乎大神说 可以

针对antd的css 单独写一条loader的规则,不开启 css modules。

使用 exclude 和 include 配置

配置在config目录下,同样修改配置 webpack.config.dev.js 文件

  1. {
  2. test: /\.css$/,exclude: /node_modules|antd\.css/,use: [
  3. require.resolve('style-loader'),{
  4. loader: require.resolve('css-loader'),options: {
  5. importLoaders: 1,// 改动
  6. modules: true,// 新增对css modules的支持
  7. localIdentName: '[name]__[local]__[hash:base64:5]',//
  8. },{
  9. loader: require.resolve('postcss-loader'),options: {
  10. // Necessary for external CSS imports to work
  11. // https://github.com/facebookincubator/create-react-app/issues/2677
  12. ident: 'postcss',plugins: () => [
  13. require('postcss-flexbugs-fixes'),autoprefixer({
  14. browsers: [
  15. '>1%','last 4 versions','Firefox ESR','not ie < 9',// React doesn't support IE8 anyway
  16. ],flexBox: 'no-2009',}),//
  17. {
  18. test: /\.css$/,include: /node_modules|antd\.css/,// 改动
  19. // modules: true,// 新增对css modules的支持
  20. // localIdentName: '[name]__[local]__[hash:base64:5]',

下面是一个 antd 的 Button 和自己写的CSS Modules 使用小例子:

  1. import React,{ Component } from 'react';
  2. import { addRecipe } from '../actions';
  3. import { Button } from 'antd';
  4. import styles from './App.css'
  5.  
  6. class App extends Component {
  7. state = {
  8. calendar: null
  9. }
  10. componentDidMount() {
  11. const { store } = this.props // 从props获取store
  12. store.subscribe(() => { // 订阅 redux store 中发生的任何变化
  13. this.setState(() => ({ // 有任何变化需要调用 setState
  14. calendar: store.getState() // 将从store中获取state将它放入本地组件state中
  15. }))
  16. })
  17. }
  18. submitFood = () => {
  19. this.props.store.dispatch(addRecipe({//store.dispatch调用addRecipe动作生成
  20. day: 'monday',meal: 'breakfast',recipe: {
  21. label: this.input.value
  22. }
  23. }))
  24. this.input.value = ''//将输入值重置为一个空的字符串
  25. }
  26. render() {
  27. return (
  28. <div>
  29. <input
  30. type='text'
  31. ref={(input)=>this.input = input}
  32. placeholder="Monday's Breakfast"
  33. />
  34. <Button type="primary" onClick={this.submitFood}>Submit</Button>
  35.  
  36. <pre className={styles.input}>Monday's Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}</pre>
  37.  
  38. </div>
  39. );
  40. }
  41. }
  42.  
  43. export default App

参考学习 CSS Modules阮一峰老师写的用法教程

这里简单使用下 react-css-modules,代码如下:

  1. import React,{ Component } from 'react';
  2. import { addRecipe } from '../actions';
  3. import { Button } from 'antd';
  4. import CSSModules from 'react-css-modules'
  5. import styles from './App.css'
  6.  
  7. class App extends Component {
  8. state = {
  9. calendar: null
  10. }
  11. componentDidMount() {
  12. const { store } = this.props // 从props获取store
  13. store.subscribe(() => { // 订阅 redux store 中发生的任何变化
  14. this.setState(() => ({ // 有任何变化需要调用 setState
  15. calendar: store.getState() // 将从store中获取state将它放入本地组件state中
  16. }))
  17. })
  18. }
  19. submitFood = () => {
  20. this.props.store.dispatch(addRecipe({//store.dispatch调用addRecipe动作生成
  21. day: 'monday',recipe: {
  22. label: this.input.value
  23. }
  24. }))
  25. this.input.value = ''//将输入值重置为一个空的字符串
  26. }
  27. render() {
  28. return (
  29. <div>
  30. <input
  31. type='text'
  32. ref={(input)=>this.input = input}
  33. placeholder="Monday's Breakfast"
  34. />
  35. <Button type="primary" onClick={this.submitFood}>Submit</Button>
  36.  
  37. <pre styleName='input'>Monday's Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}</pre>
  38.  
  39. </div>
  40. );
  41. }
  42. }
  43.  
  44. export default CSSModules(App,styles);

主要差别在于:

  1. + import CSSModules from 'react-css-modules'
  2.  
  3. - <pre className={styles.input}>
  4. + <pre styleName='input'>
  5.  
  6. - export default App
  7. + export default CSSModules(App,styles);

猜你在找的React相关文章