craco-less 项目教程

1. 项目目录结构及介绍

craco-less/
├── lib/
│   ├── index.js
│   └── ...
├── .eslintrc
├── .gitignore
├── .npmignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .yarnrc.yml
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
└── yarn.lock

目录结构介绍

• lib/: 包含项目的主要代码文件，其中 index.js 是入口文件。
• .eslintrc: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 管理。
• .npmignore: NPM 忽略文件配置，指定哪些文件或目录不需要被发布到 NPM。
• .nvmrc: Node.js 版本配置文件，指定项目所需的 Node.js 版本。
• .prettierignore: Prettier 忽略文件配置，指定哪些文件或目录不需要被 Prettier 格式化。
• .prettierrc: Prettier 配置文件，用于代码格式化。
• .yarnrc.yml: Yarn 配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• jest.config.js: Jest 测试框架的配置文件。
• package.json: 项目的依赖管理文件，包含项目的元数据和依赖包。
• yarn.lock: Yarn 锁定文件，确保依赖包的版本一致性。

2. 项目的启动文件介绍

入口文件

项目的入口文件是 lib/index.js。这个文件是整个项目的核心，负责初始化和配置 craco-less 插件。

启动流程

1. 安装依赖: 使用 yarn install 或 npm install 安装项目依赖。
2. 配置文件: 在项目的根目录下创建 craco.config.js 文件，并配置 craco-less 插件。
3. 启动项目: 使用 yarn start 或 npm start 启动项目。

3. 项目的配置文件介绍

craco.config.js

craco.config.js 是 craco-less 插件的主要配置文件。以下是一个完整的配置示例：

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "@primary-color": "#1DA57A",
              "@link-color": "#1DA57A",
              "@border-radius-base": "2px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

配置项介绍

• lessLoaderOptions: 配置 Less 加载器的选项。
  • lessOptions: Less 的配置选项。
    • modifyVars: 自定义 Less 变量。
    • javascriptEnabled: 是否启用 JavaScript 支持。

其他配置

• styleLoaderOptions: 配置 style-loader 的选项。
• cssLoaderOptions: 配置 css-loader 的选项。
• postcssLoaderOptions: 配置 postcss-loader 的选项。
• miniCssExtractPluginOptions: 配置 mini-css-extract-plugin 的选项（仅在生产环境中使用）。

通过这些配置，你可以自定义 craco-less 插件的行为，以满足项目的具体需求。