typescript - Import CSS file from npm package - Stack Overflow

admin管理员组

文章数量:1279116

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=".1/mapsjs-ui.css" />

However that feels wrong using npm.

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/v3/3.1/mapsjs-ui.css" />

However that feels wrong using npm.

• css
• typescript
• npm
• here-api

Share Improve this question Follow edited Feb 24 at 21:55 jonrsharpe 122k3030 gold badges267267 silver badges474474 bronze badges asked Feb 24 at 21:26 MakePeaceGreatAgainMakePeaceGreatAgain 37.1k66 gold badges6565 silver badges122122 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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'

in index.css (global Css file) file i dont know what framework you're using use @import "https://js.api.here/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

本文标签： typescriptImport CSS file from npm packageStack Overflow