CODEWITHSUNDEEP
csstypescriptnpmhere-api
MakePeaceGreatAgain
MakePeaceGreatAgain

Reputation: 37115

Import CSS file from npm package

I'm working on a project using Here Maps JavaScript SDK. This is my package.json file:

{
  "name": "rapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.13.0",
    "@here/maps-api-for-javascript": "^1.58.0",
    "@mui/material": "^6.1.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.112",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "leaflet-routing-machine": "^3.2.12",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "selenium": "^2.20.0",
    "selenium-webdriver": "^4.26.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }
}

How can I import the stylesheets from the npm package? Something like import <path_to_css>.css.

In my index.html I have this:

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

However that feels wrong using npm.

Upvotes: 0

Views: 29

Answers (2)

Muhammad Yahya
Muhammad Yahya

Reputation: 15

in index.css (global Css file) file i dont know what framework you're using use @import "https://js.api.here.com/v3/3.1/mapsjs-ui.css" it will include css file in your application

npm is used to handle node packages you can't directly use it for your personal css files. even importing css needs to be included in component folder or global folder

Upvotes: 0

nanvon
nanvon

Reputation: 41

Use my recent code as an example：

the css file is in: node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css

I use: import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'

Upvotes: 0

Related Questions