REACT-通过craco配置别名和less文件-以及问题解决办法

关于项目创建,引入文件层级比较深时,一般为../../../,为节省时间,美观页面,方便查阅采用了与Vue一样的格式,配置文件路径.

在react中采用通过craco配置别名和less文件,指令如下:

npm install @craco/craco@alpha -D

 然后在目录中添加文件craco.config.js,并编写webpack配置

这时会发现,依然是不生效的,需要我们在package.json中修改脚本,将路径改为craco

 之后是配置less,这时是有产生文件冲突问题的,找到文档ant design,

这里有对less的配置,但不是最新的或者说最适用的,我们需要找到版本兼容的craco,

找到GitHub上框架作者提供了解决方法

npm install craco-less@2.1.0-alpha.0

运行

代码块最后呈现

const path = require('path')

const CracoLessPlugin = require('craco-less');

const resolve = pathname => path.resolve(__dirname, pathname)

module.exports = {

  // less

  plugins: [

    {

      plugin: CracoLessPlugin

    },

  ],

  // webpack

  webpack: {

    alias: {

      "@": resolve("src"),

      "components": resolve("src/components"),

      "utils": resolve("src/utils")

    }

  }

}

// __dirname  代表当前文件夹目录之下

// 然后去craco.config.js文件中

// 调试中修改路径,并重新跑动程序

// 修改react-scripts 为craco

// 针对"@craco/craco": "^7.0.0-alpha.7",版本冲突问题采用指令 npm i craco-less@2.1.0-alpha.0