{"id":19383883,"url":"https://github.com/docspring/craco-less","last_synced_at":"2025-04-04T11:16:14.230Z","repository":{"id":34911894,"uuid":"157258232","full_name":"DocSpring/craco-less","owner":"DocSpring","description":"A Less plugin for craco / react-scripts / create-react-app","archived":false,"fork":false,"pushed_at":"2024-05-02T11:49:43.000Z","size":3252,"stargazers_count":123,"open_issues_count":20,"forks_count":46,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T10:07:17.921Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DocSpring.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-12T18:31:23.000Z","updated_at":"2025-03-18T17:31:02.000Z","dependencies_parsed_at":"2024-01-11T10:39:04.324Z","dependency_job_id":"28fd9225-66b4-4ace-bcb3-296bbdf89266","html_url":"https://github.com/DocSpring/craco-less","commit_stats":{"total_commits":144,"total_committers":17,"mean_commits":8.470588235294118,"dds":"0.38888888888888884","last_synced_commit":"2d4b5ab1bfecd2e0881fb0bbe5ffd377de1740e3"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-less","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-less/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-less/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-less/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DocSpring","download_url":"https://codeload.github.com/DocSpring/craco-less/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166169,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T09:28:15.395Z","updated_at":"2025-04-04T11:16:14.213Z","avatar_url":"https://github.com/DocSpring.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Test Status](https://github.com/DocSpring/craco-less/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/DocSpring/craco-less/actions/workflows/test.yml)\n[![Coverage Status](https://coveralls.io/repos/github/DocSpring/craco-less/badge.svg?branch=master)](https://coveralls.io/github/DocSpring/craco-less?branch=master)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n---\n\n### Community Maintained\n\nWe rely on your help to keep this project up to date and work with the latest versions of `craco` and `react-scripts`.\n\nBefore you send a PR, please check the following:\n\n- 100% test coverage\n\n```\nyarn test\n```\n\n- Code is formatted with Prettier\n\n```\nyarn format\n```\n\n- No ESLint warnings\n\n```\nyarn lint\n```\n\n- No security vulnerabilities in any NPM packages\n\n```\nyarn audit\n```\n\nYou are also welcome to add your GitHub username to the [Contributors](#Contributors) section at the bottom of this README. (_optional_)\n\n### Please don't send a pull request if it does not meet the above requirements\n\nPull requests will be ignored and closed if there is a failing build on Travis CI.\n\n---\n\n# Craco Less Plugin\n\nThis is a [craco](https://github.com/dilanx/craco) plugin that adds Less support to [create-react-app](https://facebook.github.io/create-react-app/) version \u003e= 2.\n\n\u003e Use [react-app-rewired](https://github.com/timarney/react-app-rewired) for `create-react-app` version 1.\n\n## Ant Design\n\nIf you want to use [Ant Design](https://ant.design/) with `create-react-app`,\nyou should use the [`craco-antd`](https://github.com/DocSpring/craco-antd) plugin.\n`craco-antd` includes Less and `babel-plugin-import` (to only include the required CSS.) It also makes it easy to customize the theme variables.\n\n## Supported Versions\n\n`craco-less` is tested with:\n\n- `react-scripts`: `^5.0.1`\n- `@craco/craco`: `^7.1.0`\n\n## Installation\n\nFirst, follow the [`craco` Installation Instructions](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation) to install the `craco` package, create a `craco.config.js` file, and modify the scripts in your `package.json`.\n\nThen install `craco-less`:\n\n```bash\n$ yarn add -D craco-less\n\n# OR\n\n$ npm i -D craco-less\n```\n\n## Usage\n\nHere is a complete `craco.config.js` configuration file that adds Less compilation to `create-react-app`:\n\n```js\nconst CracoLessPlugin = require(\"craco-less\");\n\nmodule.exports = {\n  plugins: [{ plugin: CracoLessPlugin }],\n};\n```\n\n## Configuration\n\nYou can pass an `options` object to configure the loaders and plugins(configure _less_ and _less modules_ at the same time). You can also pass a `modifyLessRule`(or `modifyLessModuleRule`) callback to have full control over the Less webpack rule.\n\n- `options.styleLoaderOptions`\n  - _Default:_ `{}`\n  - [View the `style-loader` options](https://webpack.js.org/loaders/style-loader/#options)\n- `options.cssLoaderOptions`\n  - _Default:_ `{ importLoaders: 2 }`\n  - [View the `css-loader` options](https://webpack.js.org/loaders/css-loader/#options)\n- `options.postcssLoaderOptions`\n  - _Default:_ `{ ident: \"postcss\", plugins: () =\u003e [ ... ] }`\n  - [View the `postcss-loader` options](https://webpack.js.org/loaders/postcss-loader/#options)\n- `options.lessLoaderOptions`\n  - _Default:_ `{}`\n  - [View the `less-loader` documentation](https://webpack.js.org/loaders/less-loader/)\n  - [View the Less options](http://lesscss.org/usage/#less-options)\n    - You must use \"camelCase\" instead of \"dash-case\", e.g. `--source-map` =\u003e `sourceMap`\n- `options.miniCssExtractPluginOptions` _(only used in production)_\n  - _Default:_ `{}`\n  - [View the `mini-css-extract-plugin` documentation](https://github.com/webpack-contrib/mini-css-extract-plugin)\n- `options.modifyLessRule(lessRule, context)`\n  - A callback function that receives two arguments: the webpack rule, and the context. You must return an updated rule object.\n    - `lessRule`:\n      - `test`: Regex (default: `/\\.less$/`)\n      - `exclude`: Regex (default: `/\\.module\\.less$/`)\n      - `use`: Array of loaders and options.\n      - `sideEffects`: Boolean (default: `true`)\n    - `context`:\n      - `env`: \"development\" or \"production\"\n      - `paths`: An object with paths, e.g. `appBuild`, `appPath`, `ownNodeModules`\n- `options.modifyLessModuleRule(lessModuleRule, context)`\n  - A callback function that receives two arguments: the webpack rule, and the context. You must return an updated rule object.\n    - `lessModuleRule`:\n      - `test`: Regex (default: `/\\.module\\.less$/`)\n      - `use`: Array of loaders and options.\n    - `context`:\n      - `env`: \"development\" or \"production\"\n      - `paths`: An object with paths, e.g. `appBuild`, `appPath`, `ownNodeModules`\n\nFor example, to configure `less-loader`:\n\n```js\nconst CracoLessPlugin = require(\"craco-less\");\n\nmodule.exports = {\n  plugins: [\n    {\n      plugin: CracoLessPlugin,\n      options: {\n        lessLoaderOptions: {\n          lessOptions: {\n            modifyVars: {\n              \"@primary-color\": \"#1DA57A\",\n              \"@link-color\": \"#1DA57A\",\n              \"@border-radius-base\": \"2px\",\n            },\n            javascriptEnabled: true,\n          },\n        },\n      },\n    },\n  ],\n};\n```\n\n## CSS / Less Modules\n\n**CSS / Less modules are enabled by default, and the default file suffix for _less modules_ is `.module.less`.**\n\nIf your project is using typescript, please append the following code to `./src/react-app-env.d.ts`\n\n```ts\ndeclare module \"*.module.less\" {\n  const classes: { readonly [key: string]: string };\n  export default classes;\n}\n```\n\nYou can use `modifyLessModuleRule` to configure the file suffix and loaders ([css-loader](https://webpack.js.org/loaders/css-loader/), [less-loader](https://webpack.js.org/loaders/less-loader/) ...) for _less modules_.\n\nFor example:\n\n```js\nconst CracoLessPlugin = require(\"craco-less\");\nconst { loaderByName } = require(\"@craco/craco\");\n\nmodule.exports = {\n  plugins: [\n    {\n      plugin: CracoLessPlugin,\n      options: {\n        modifyLessRule(lessRule, context) {\n          // You have to exclude these file suffixes first,\n          // if you want to modify the less module's suffix\n          lessRule.exclude = /\\.m\\.less$/;\n          return lessRule;\n        },\n        modifyLessModuleRule(lessModuleRule, context) {\n          // Configure the file suffix\n          lessModuleRule.test = /\\.m\\.less$/;\n\n          // Configure the generated local ident name.\n          const cssLoader = lessModuleRule.use.find(loaderByName(\"css-loader\"));\n          cssLoader.options.modules = {\n            localIdentName: \"[local]_[hash:base64:5]\",\n          };\n\n          return lessModuleRule;\n        },\n      },\n    },\n  ],\n};\n```\n\n#### CSS modules gotcha\n\nThere is a known problem with Less and [CSS modules](https://github.com/css-modules/css-modules) regarding relative file paths in `url(...)` statements. [See this issue for an explanation.](https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335)\n\n\u003e ([Copied from the less-loader README](https://github.com/webpack-contrib/less-loader#css-modules-gotcha).)\n\n## Further Configuration\n\nIf you need to configure anything else for the webpack build, take a look at the\n[Configuration Overview section in the `craco` README](https://github.com/dilanx/craco/blob/master/packages/craco/README.md#configuration-overview). You can use `CracoLessPlugin` while making other changes to `babel` and `webpack`, etc.\n\n## Contributing\n\nInstall dependencies:\n\n```bash\n$ yarn install\n\n# OR\n\n$ npm install\n```\n\nRun tests:\n\n```\n$ yarn test\n```\n\nBefore submitting a pull request, please check the following:\n\n- All tests are passing\n  - Run `yarn test`\n- 100% test coverage\n  - Coverage will be printed after running tests.\n  - Check the coverage results in your browser: `open coverage/lcov-report/index.html`\n- No ESLint errors\n  - `yarn lint`\n- All code is formatted with [Prettier](https://prettier.io/)\n  - `yarn format`\n  - If you use VS Code, you should enable the `formatOnSave` option.\n- Using the correct webpack version as a dependency\n  - `yarn update_deps`\n  - NOTE: The `webpack` dependency is needed to silence some annoying warnings from NPM.\n    This must always match the version from `react-scripts`.\n\n## Releasing a new version\n\n- Make sure the \"Supported Versions\" section is updated at the top of the README.\n- Check which files will be included in the NPM package:\n  - `npm pack`\n  - Update `.npmignore` to exclude any files.\n- Release new version to NPM:\n  - `npm publish`\n\n## License\n\n[MIT](./LICENSE)\n\n## Contributors\n\n- [ndbroadbent](https://github.com/ndbroadbent)\n- [tux-tn](https://github.com/tux-tn)\n- [alexandrtovmach](https://github.com/alexandrtovmach)\n- [cemremengu](https://github.com/cemremengu)\n- [AO17](https://github.com/AO17)\n- [Vovan-VE](https://github.com/Vovan-VE)\n- [yifanwangsh](https://github.com/yifanwangsh)\n- [swillis12](https://github.com/swillis12)\n- [nutgaard](https://github.com/nutgaard)\n- [alexander-svendsen](https://github.com/alexander-svendsen)\n- [sgtsquiggs](https://github.com/sgtsquiggs)\n- [fanck0605](https://github.com/fanck0605)\n- [xyy94813](https://github.com/xyy94813)\n- [kamronbatman](https://github.com/kamronbatman)\n- [fourpastmidnight](https://github.com/fourpastmidnight)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocspring%2Fcraco-less","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdocspring%2Fcraco-less","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocspring%2Fcraco-less/lists"}