create-react-app中配置less与别名alias（使用craco）

最新推荐文章于 2024-05-09 21:40:44 发布

Green8y0

最新推荐文章于 2024-05-09 21:40:44 发布

阅读量1.2k

点赞数

分类专栏： React 文章标签： react.js javascript less typescript

本文链接：https://blog.csdn.net/init_8y0/article/details/125919761

版权

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在create-react-app中配置less样式文件和别名alias，通过使用craco进行配置，详细步骤包括初始化项目、安装craco和craco-less、配置craco.config.js、创建tsconfig-base.json、修改tsconfig.json、react-app-env.d.ts以及package.json，最后成功启动项目并提供了一个配置成功的demo。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

create-react-app中配置less和别名alias，使用craco
已配置成功的demo：craco-demo

1.初始化项目

# 创建一个名称为craco-demo的react项目（基于typescript）
npx create-react-app craco-demo --template typescript

初始化项目

2.安装craco和craco-less

参考：craco

# 安装craco
yarn add craco

安装craco

# 安装craco-less（若只配置alias则不需要安装craco-less）
yarn add craco-less

安装craco-less

3.配置craco.config.js

craco.config.js需要与package.json同级
参考：craco-less

// craco.config.js
const path = require('path')
const CracoLessPlugin = require('craco-less')
const { loaderByName } = require('@craco/craco')

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessModuleRule(lessModuleRule, context) {
          // Configure the file suffix
          lessModuleRule.test = /\.module.less$/

          // Configure the generated local ident name.
          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
          cssLoader.options.modules = {
            localIdentName: '[local]_[hash:base64:5]',
          }
          return lessModuleRule
        },
        modifyLessRule(lessRule, context) {
          // You have to exclude these file suffixes first,
          // if you want to modify the less module's suffix
          lessRule.exclude = /\.less$/;
          return lessRule;
        },
      },
    },
  ]
}

4.创建tsconfig-base.json

创建tsconfig-base.json（与tsconfig.json同级）

// tsconfig-base.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@*": ["src/*"]
    }
  }
}

5.修改tsconfig.json

// tsconfig.json
{
  "extends": "./tsconfig-base.json",
  ...
}

修改tsconfig.json

6.修改react-app-env.d.ts

/// <reference types="react-scripts" />

declare module '*.module.less' {
  const classes: { readonly [key: string]: string }
  export default classes
}