parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.44k stars 2.27k forks source link

@import 'npm:package/styles.css' not working #6982

Closed ProLoser closed 3 years ago

ProLoser commented 3 years ago

🐛 bug report

According to the latest documentation, in order to import css from a node module I must prefix it with npm: however this does not appear to be working from inside my index.scss or when I try to directly import the stylesheet with <link type=rel/stylesshet>

🎛 Configuration (.babelrc, package.json, cli command)

parcel v2.0.0-rc.0

{
  "name": "zeus",
  "versions": {
    "node": ">=14.11.0"
  },
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "wsmm": "yarn workspace wsmm start",
    "browser": "yarn clean && yarn workspace browser start --no-hmr",
    "browser:build": "yarn workspace browser build",
    "orchestrator": "yarn workspace orchestrator dev",
    "orchestrator-mock-client": "yarn workspace orchestrator-mock-client start",
    "clean": "rm -rf .parcel-cache; rm -rf packages/*/dist"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.11.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@parcel/babel-preset": "^2.0.0-alpha.2.1",
    "@parcel/transformer-image": "2.0.0-rc.0",
    "@parcel/transformer-sass": "2.0.0-rc.0",
    "@parcel/transformer-worklet": "2.0.0-rc.0",
    "eslint": "^7.8.1",
    "eslint-config-xo": "^0.32.1",
    "parcel": "next"
  }
}

🤔 Expected Behavior

CSS would be merged into bundled stylesheet

😯 Current Behavior

Import statement is left untouched, browser throws an error saying the asset located at npm:intro.js/introjs.css is not available. If I remove the .css then parcel fails saying that the css file cannot be found, so parcel DOES see this css file, but it's not processing it into the bundle.

💁 Possible Solution

Double check documentation and bundle/build behavior or parcel rc0 for correctness on importing from npm package.

🔦 Context

CSS is broken for me on rc0 (at least during builds, still trying to confirm if this affects dev mode as well)

💻 Code Sample

// index.scss
@import 'npm:intro.js/introjs.css';

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-rc.0
Node 14.17.0
Yarn 1.22.5
Operating System linux/windows
devongovett commented 3 years ago

I believe this was added after the RC version was released. Did you try a nightly?

SoftCreatR commented 3 years ago

With the latest nightly, it works. I had the same problem while using RC 0.

ProLoser commented 3 years ago

Yup works with nightly.