create-react-app利用craco配置路径别名、Less

写的挺好,直接搬过来了,验证过,不是无脑搬运
原文

 

1.安装 craco/craco

$ yarn add  @cracco/craco
# OR $ npm install @craco/craco --save

2.修改 package.json 文件

create-react-app利用craco配置路径别名、Less
"scripts": {
//   "start": "react-scripts start",
//   "build": "react-scripts build",
//   "test": "react-scripts test",
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}
create-react-app利用craco配置路径别名、Less

3. 在根目录下创建craco.config.js文件用于修改默认配置

  craco.config.js 和 package.json同级

my-app
├── node_modules
├── craco.config.js
└── package.json
module.exports = {
  // 配置文件
}

一、配置别名

  配置别名也需要修改webpack的配置,当然我们也可以借助于 craco 来完成:

create-react-app利用craco配置路径别名、Less
...

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  ...
  ,
  webpack: {
    alias: {
      '@': resolve("src"),
      'components': resolve("src/components"),
    }
  }
}
create-react-app利用craco配置路径别名、Less

在导入时就可以按照下面的方式来使用了:

import CommentInput from '@/components/comment-input';
import CommentItem from 'components/comment-item';

二、在create-react-app中使用Less

1.安装 craco-less ( 内部自动安装 less less-loader 相关依赖 )

npm install craco-less --save

2.配置 craco.config.js 文件

const CracoLessPlugin = require("craco-less");
 
module.exports = {
  plugins: [{ plugin: CracoLessPlugin }]
};
上一篇:Nginx的启动、停止与重启


下一篇:深入浅出数据结构C语言版(3)——递归简论