npmpackage.info

customize-cra-less-loader

Add less loader to any create-react-app using customize-cra

2.0.0

MIT

JavaScript

Installations

npm install customize-cra-less-loader

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

3

Closed

3

Releases

Release v2.0.0

v2.0.0

Published on 23 Dec 2021

Release v1.0.0

v1.0.0

Published on 19 Aug 2020

View all 2 releases

Developer

xyy94813

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

12.22.8

NPM Version

6.14.15 Statistics

14 Stars

18 Commits

2 Watching

1 Branches

1 Contributors

Updated on 20 Sept 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

419,622

Last day

-13.7%

572

Compared to previous day

Last week

-0.6%

2,802

Compared to previous week

Last month

12.9%

11,945

Compared to previous month

Last year

-3.4%

161,884

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react-scripts customize-cra

Dev Dependencies

@babel/plugin-transform-modules-commonjs @babel/preset-env babel-jest eslint eslint-config-airbnb-base eslint-plugin-import husky jest lint-staged prettier rollup rollup-plugin-terser

Versions

customize-cra-less-loader

Add less loader to any create-react-app using customize-cra. Support with css-loader v3.

Only support react-scripts version >= v5.0.0.

If PR 255 been merged into master, you don't need this modules

Usage

First, install customize-cra-less-loader, less and less-loader packages:

1npm i -D customize-cra-less-loader less less-loader
2// or yarn add --dev customize-cra-less-loader less less-loader

After it's done, call addLessLoader in override like below:

1const { override } = require("customize-cra");
2const addLessLoader = require("customize-cra-less-loader");
3
4module.exports = override(addLessLoader(loaderOptions));

loaderOptions is optional. If you have Less specific options, you can pass to it. For example:

1const { override } = require("customize-cra");
2const addLessLoader = require("customize-cra-less-loader");
3
4module.exports = override(
5  addLessLoader({
6    cssLoaderOptions: {
7      sourceMap: true,
8      modules: {
9        localIdentName: "[hash:base64:8]",
10      },
11    },
12    lessLoaderOptions: {
13      lessOptions: {
14        strictMath: true,
15      },
16    },
17  })
18);

Check Less document for all available specific options you can use.

Once less-loader is enabled, you can import .less file in your project.

And .module.less will use CSS Modules.

if you use TypeScript (npm init react-app my-app --typescript) with CSS Modules, you should edit react-app-env.d.ts.

1declare module "*.module.less" {
2  const classes: { [key: string]: string };
3  export default classes;
4}

Contribution

DefinitelyTyped only works because of contributions by users like you!

Git Message

Follow the Angular git commit message specification

But, you can ignore the scope

License

MIT RoXoM xyy94813@sina.com

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/xyy94813/customize-cra-less-loader/npmpublish.yml/main?enable=pin
Warn: downloadThenRun not pinned by hash: .github/workflows/nodejs.yml:24
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned
Info: 0 out of 1 downloadThenRun dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

56 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

2.9

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to customize-cra-less-loader

less-loader

12.2.0

A Less loader for webpack. Compiles Less to CSS.

@storybook/builder-vite

8.4.5

A plugin to run and build Storybooks with Vite

customize-cra

1.0.0

[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)

react-app-rewired

2.2.1

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts