create-react-app利用craco配置路徑別名、Less

1.安裝 craco/craco

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

2.修改 package.json 文件

"scripts": { // "start": "react-scripts start", // "build": "react-scripts build", // "test": "react-scripts test",
  "start": "craco start", "build": "craco build", "test": "craco test", }

3. 在根目錄下創建craco.config.js文件用於修改默認配置

　　craco.config.js 和 package.json同級

my-app ├── node_modules ├── craco.config.js └── package.json

module.exports = { // 配置文件
}

一、配置別名

　　配置別名也需要修改webpack的配置，當然我們也可以借助於 craco 來完成：

... const path = require("path"); const resolve = dir => path.resolve(__dirname, dir); module.exports = { ... , webpack: { alias: { '@': resolve("src"), 'components': resolve("src/components"), } } }

在導入時就可以按照下面的方式來使用了：

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 }] };