可以在项目根目录下的 package.json 文件中添加 "less": "less" 的依赖,然后在 src 目录下创建一个 index.less 文件,最后在 index.js 中引入该 index.less 文件即可。具体步骤如下:

  1. 在项目根目录下打开终端,运行以下命令安装 less 依赖:

    npm install less --save-dev
    
  2. package.json 文件中添加 "less": "less" 的依赖,如下所示:

    {
      "name": "my-app",
      "version": "0.1.0",
      "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      },
      "devDependencies": {
        "less": "^3.12.2"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      }
    }
    
  3. src 目录下创建一个 index.less 文件,并编写需要的样式,如下所示:

    body {
      background-color: #f0f0f0;
    }
    
    .title {
      font-size: 24px;
      font-weight: bold;
    }
    
  4. index.js 文件中引入该 index.less 文件,如下所示:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.less'; // 引入 index.less 文件
    import App from './App';
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
  5. 运行 npm start 命令启动项目,即可看到 index.less 文件中的样式生效。

create-react-app创建的项目现在想添加less配置要加在哪里啊

原文地址: https://www.cveoy.top/t/topic/0D9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录