search

transitive-bullshit / create-react-library

CLI for creating reusable react libraries.
https://transitivebullsh.it/javascript-dev-tools-in-2022
4.78k stars 300 forks source link

How to use less styles? #267

Open nikhil-mahirrao opened 4 years ago

nikhil-mahirrao commented 4 years ago

I have created a new project using create-react-library command, and its working fine with Demo example. But the problem started when I tried to use .less file types for styling. I have installed less and added to peer dependencies, after running program it not applying a style to the component, even those styles are present in dist\index.css.

Even I tried to use the CSS file instead of less but still, it's not working.

I searched for some solutions on the internet but every solution is talking about rollup config and all but in my project its showing microbundle instead of rollup.

This is my package.json file "scripts": { "build": "microbundle-crl --no-compress --format modern,cjs", "start": "microbundle-crl watch --no-compress --format modern,cjs", "prepare": "run-s build", "test": "run-s test:unit test:lint test:build", "test:build": "run-s build", "test:lint": "eslint .", "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", "test:watch": "react-scripts test --env=jsdom", "predeploy": "cd example && npm install && npm run build", "deploy": "gh-pages -d example/build" }, "peerDependencies": { "react": "^16.0.0", "antd": "^4.4.1", "less": "^3.11.3" }, "devDependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^25.1.4", "@types/node": "^12.12.38", "@types/react": "^16.9.27", "@types/react-dom": "^16.9.7", "@typescript-eslint/eslint-plugin": "^2.26.0", "@typescript-eslint/parser": "^2.26.0", "babel-eslint": "^10.0.3", "cross-env": "^7.0.2", "eslint": "^6.8.0", "eslint-config-prettier": "^6.7.0", "eslint-config-standard": "^14.1.0", "eslint-config-standard-react": "^9.2.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-node": "^11.0.0", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-react": "^7.17.0", "eslint-plugin-standard": "^4.0.1", "gh-pages": "^2.2.0", "less": "^3.11.3", "microbundle-crl": "^0.13.10", "npm-run-all": "^4.1.5", "prettier": "^2.0.4", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "^3.4.1", "typescript": "^3.7.5" }, "files": [ "dist" ], "dependencies": { "antd": "^4.4.1" } Also rollup.config file is missing in my setup, not sure it should be there or not.

Lib

VadimCpp commented 3 years ago

@nikhil-mahirrao have you solved your problem?

N1ck0lay commented 3 years ago

to use Less css you need:

  1. npm i less --save-dev (in the root folder)

  2. add "--css-modules false" to your build and start commands, so you will have: "build": "microbundle-crl --no-compress --format modern,cjs --css-modules false", "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false"

  3. create Button.js and styles.less files and import less file to Button.js with import './styles.less' and you are ready to go!