parcel-bundler / parcel

The zero configuration build tool for the web. πŸ“¦πŸš€
https://parceljs.org
MIT License
43.5k stars 2.27k forks source link

Can't use tilde paths to import css from node_modules #2857

Closed b1r1b1r1 closed 5 years ago

b1r1b1r1 commented 5 years ago

πŸ› bug report

Tilde path does not work when importing css from node_modules

πŸŽ› Configuration (.babelrc, package.json, cli command)

.sassrc

{
"includePaths": ["node_modules"]
}

package.json

  "devDependencies": {
    "parcel-bundler": "^1.12.3",
    "sass": "^1.17.3"
  },
  "dependencies": {
    "react-simplemde-editor": "^4.0.0"
  }

cli command

parcel serve index.html

main.scss @import '~/easymde/dist/easymde.min.css';

index.js import './main.scss';

πŸ€” Expected Behavior

Parcel should bundle everything without errors

😯 Current Behavior

I get the next error:

/Users/xmikasax/git/parcel_css_import_mwe/main.scss:1:1: Cannot resolve dependency '~/easymde/dist/easymde.min.css' at '/Users/xmikasax/git/parcel_css_import_mwe/~/easymde/dist/easymde.min.css'

πŸ’ Possible Solution

The reason might be in package name (it is 'react-simplemde-editor') while its folder with styles in node_modules is 'easymde'

πŸ”¦ Context

πŸ’» Code Sample

https://github.com/xmikasax/parcel_css_import_mwe

🌍 Your Environment

Software Version(s)
Parcel 1.12.3
Node 11.12.0
npm/Yarn 6.9.0
Operating System Mac OS
mischnic commented 5 years ago

Parcel resolves ~ to the nearest folder containing node_modules, so you usually need to do something like this: ~/node_modules/easymde/dist/easymde.min.css Does this work for your?

Docs: https://parceljs.org/module_resolution.html#~-tilde-paths

b1r1b1r1 commented 5 years ago

Yes, it works, thank you. But what does package root: the directory of the nearest module root in node_modules in docs stand for?

mischnic commented 5 years ago

Basically the same as nearest package root:

The algorithm goes up one level in the file hierarchy and stops when the next level up would be node_modules or the root of your project was reached.

pkg-1
  |- src
      |- index.js (`~` resolves to `pkg-1` because of project root )
  |- node_modules
      |- some-dep
         |- index.js (`~` resolves to `some-dep` because of node_modules)

https://github.com/parcel-bundler/parcel/blob/636bb50baeae15730c3b91cd3b58b457c31f7200/packages/core/parcel-bundler/src/Resolver.js#L128-L144

b1r1b1r1 commented 5 years ago

Thank you.