SASS: Can't find stylesheet to import (node_module)

mischnic commented 4 years ago

parcel src/index.html and parcel serve src/index.html work fine with my App.scss file:

$theme-colors: (
    "primary": #8AFFA3,
);

@import "bootstrap/scss/bootstrap";

But then when I try to build for production using parcel build src/index.html i get this error:

> parcel build src/index.html

🚨 Build failed.
@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
5 │ @import "bootstrap/scss/bootstrap.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.scss 5:9  root stylesheet
Error: Can't find stylesheet to import.
  ╷
5 │ @import "bootstrap/scss/bootstrap.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.scss 5:9  root stylesheet

Here is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./App.scss">
</head>
<body>
    <div id="root"></div>

    <script src="./index.tsx"></script>
</body>
</html>

Originally posted by @Ethan-Arrowood in https://github.com/parcel-bundler/parcel/issues/3377#issuecomment-627095775

mischnic commented 4 years ago

@Ethan-Arrowood in a setup like this

.
├── package.json
├── src
│   ├── App.scss
│   └── index.html
└── yarn.lock

Both build and serve mode seem to work:

niklas@nmb:sass-pkg $ yarn parcel build src/index.html --no-cache
yarn run v1.22.4
$ parcel build src/index.html --no-cache
✨ Built in 16.19s

dist/index.html              286 B    6.94s
dist/App.40082c93.css    140.13 KB    6.86s
✨  Done in 18.19s.

niklas@nmb:sass-pkg $ yarn parcel src/index.html --no-cache
yarn run v1.22.4
$ parcel src/index.html --no-cache
ℹ️ Server running at http://localhost:1234

Ethan-Arrowood commented 4 years ago

I was using npm. I was able to fix it by changing the path to @import "node_modules/bootstrap/scss/bootstrap";

Ethan-Arrowood commented 4 years ago

Ya know, maybe it was an npm dependency issue. I'll see if removing node_modules and reinstalling fixes things. I'll update this issue with more later

Ethan-Arrowood commented 4 years ago

Tested this and it works for me now. Must have been the cache or some lingering module. Thank you!

Silvenga commented 3 years ago

I've got the same issue, same error. I'm using yarn. Works under serve, but not under build.

This only happens with Bootstrap 5, what version were you testing @Ethan-Arrowood?

jpgilchrist commented 3 years ago

This is also happening with tailwindcss

serve works, build fails.

🚨 Build failed.
@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  src/index.global.scss 1:9  root stylesheet

mischnic commented 3 years ago

@jpgilchrist That seems to work for me (both serve and build). Can you open a new issue with a complete code sample to reproduce this?

jpgilchrist commented 3 years ago

Just switching it to "node_modules/tailwind" did the trick per the recommendation above. Ill try to reproduce in a clean environment.

WickyNilliams commented 3 years ago

Seeing the same issue here.

My project structure is like so:

.
├── package-lock.json
├── package.json
└── src
    ├── index.html
    ├── script.js
    └── style.scss

It works fine when serveing, but fails when building. I was able to workaround the issue by adding a .sassrc file to the project root:

{
  "includePaths": [
    "node_modules"
  ]
}

EDIT: I just set out to recreate a minimal reproduction, but i didn't get the issue. So I assume it was some caching thing. If i now go back to my actual project, delete the parcel cache, and build again, it all works (even without the sassrc file)

tillsanders commented 2 years ago

I have a similar issue. I was using the npm: syntax inside my SASS files like this:

@import "npm:@picocss/pico/scss/variables";

This worked with parcel src/index.pug, but not with parcel build src/index.pug. It did work, however, once I removed the main-property from my package.json which was set to index.js:

{
  "name": "my-package",
  "main": "index.js"
}

Parcel thought I was trying to build a library, but I was actually building a simple web page. I'm not sure what the connection is to my import statement, though.

peterbe commented 7 months ago

I don't know if it's Parcel or Sass's fault, but I too struggled with this. I trialed-and-errored till something finally worked. I ended up with:

@use "node_modules/@picocss/pico/scss/pico"

but I tried so many variations. I'm sorry, but I'm not a SASS expert. I wish the error message could have included the name of the file(s) it tried to read from disk that ultimately raise an ENOENT error from the fs module.

welljs commented 5 months ago

@use "node_modules/@picocss/pico/scss/pico"
looks strange but it works

steinybot commented 1 week ago

Same issue here

steinybot commented 1 week ago

The problem for me is that includeNodeModules was false when run as parcel build but not parcel serve. Adding this to package.json fixed it:

  "targets": {
    "main": {
      "includeNodeModules": {
        "*.scss": true
      }
    }
  }

parcel-bundler / parcel

SASS: Can't find stylesheet to import (node_module) #4609