react-demo项目:支持使用CSS Modules(不使用create-react-app脚手架)

node版本为v14.17.0
项目使用css modules必须先进行配置

webpack.config.js文件配置

  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
        }, ],
      },
      {
        test: /\.css$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
          options: {
            modules: true//开启modules
          }
        }],
      },
    ],
  },

更多详细查看：https://webpack.docschina.org/loaders/css-loader/

//App.jsx
import React, { useEffect } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import style from './App.css';

function App() {
  const navigate = useNavigate();
  // 获取当前路由的信息
  const location = useLocation();

  const go = (link) => {
    navigate(link, { state: {} });

  };


  useEffect(() => {
    console.log('location', location);
    // console.log('navigate',navigate);
  }, [location])
  return (
    <div className={style['H-layout']}>
      <div className={style['H-header']}>
        <span> hello Work</span>
      </div>

      <div className={style['H-body']}>
        <div className={style["H-silder"]}>
          <button type="button" className={style["btn"]} onClick={() => go('/home')}>
            Home
          </button>
          <button type="button" className={style["btn"]} onClick={() => go('/looking')}>
            Looking
          </button>
          <button type="button" className={style["btn"]} onClick={() => go('/about')}>
            about
          </button>
        </div>
        <div className={style["H-container"]}>
          <Outlet />
        </div>
      </div>
    </div>
  );
}

export default App;

App.css文件

/* 按钮样式 */
.btn {
  height: 28px;
}

/* 布局样式 */
.H-layout {
}
.H-header {
  height: 100px;
  background-color: aqua;
}
.H-body {
  display: flex;
}

.H-silder {
  width: 200px;
  background-color: bisque;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}
.H-silder .btn {
  margin-bottom: 10px;
}
.H-container {
  width: calc(100% - 200px);
  background-color: aquamarine;
}