Parcel: Importing CSS from node_modules

[shiloa]

Hi,

Looks very cool!

I have a SCSS file in a project that imports CSS from node_modules using @import declaration:

@import '~some-package/path/to/style';
@import '../../styles/colors';

// etc...

When I run parcel I get the following error:

🚨  /Users/shiloa/projects/myapp/src/components/MainApp.scss: File to import not found or unreadable: ~some-package/path/to/style.
Parent style sheet: stdin

I should note that I did not configure anything specifically for parcel before running parcel src/index.jsx (I have an existing webpack and babel configuration). Do I need some special configuration to support SCSS files or @import from node_modules ?

[devongovett]

The node_modules resolution algorithm isn't implemented yet for SASS/SCSS. Currently you could make a .sassrc or .sassrc.js file to configure the node-sass includePaths option to include node_modules.

The real solution will be to replace sass's default resolution algorithm with parcel's (node). I recently did this for stylus, so just a bit more work for sass.

[shiloa]

Sounds good - thanks!

[StarpTech]

@devongovett I tried it with .sassrc but it doesnt work.

@import "./variables";
@import "bulma/bulma.scss";

{
  "includePaths": [
    "node_modules"
  ]
}



md5-607da90e7c50e52bde35bddd59e4c20b



> parcel watch ./app/index.js

🚨  E:\Repositorys\pe-dotnet-core\src\pe-dotnet-core\wwwroot\app\styles\app.scss:2:1: File to import not found or unreadable: bulma/bulma.scss.
Parent style sheet: stdin
    at options.error (E:\Repositorys\pe-dotnet-core\src\pe-dotnet-core\wwwroot\node_modules\node-sass\lib\index.js:291:26)

[shiloa]

I agree, still running into the same issue. Haven't had a chance to look at the source that originates it yet, but it appears adding .sassrc does not resolve the issue.

[DanielRuf]

Same here. It resolves some but not all, especially subdirs.

[StarpTech]

This looks a like manual way to build sass files. This isn't a workaround for parcel but thanks. Until this is fixed I will use another build tool.

[DanielRuf]

@StarpTech maybe there is one at https://github.com/danielruf/awesome-bundlers

[xzyfer]

FWIW the Sass import resolution algo is non-trivial to reimplement. Keep in mind Sass is ~10 years old with tens of millions of lines of Sass could out in the wild.

Any subtle changes to the import resolution algo could break a lot of existing code. I suggest looking at https://github.com/sass-eyeglass/eyeglass for prior work in the field of adapting Sass' import resolution for node_modules.

[tomatau]

I've been fighting with this for a while using .sassrc as a JSON object and yaml, neither worked.
But!

I changed to .sassrc.js and added the following configuration:

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}

This works like a charm :)

PS. don't forget to --no-cache

[lowski]

@tomatau thanks - this work like a charm!

--no-cache option for parcel is important (parcel src/index.html --no-cache) - without it, it throws the same error.

[ryuheechul]

I am still having the same issue even though I added .sassrc.js as suggested above.
I'm trying to change this to use parcel instead of webpack

and got this message

🚨  /Users/me/grommet-standalone/node_modules/grommet/scss/vanilla/index.scss:4:1: File to import not found or unreadable: inuit-defaults/settings.defaults.
Parent style sheet: /Users/me/grommet-standalone/node_modules/grommet/scss/grommet-core/_settings.scss
    at options.error (/Users/heechul/me/grommet-standalone/node_modules/node-sass/lib/index.js:291:26)

[jeanlucaslima]

Working like a charm here with bulma. Not intuitive, should be documented, but working.

[fregante]

I think that until this is fully implemented it's best to just use the ugly-but-perfectly-working

@import url(node_modules/blahblah/file.scss)

even if you have you add a dozen ../ in there

[jbreckmckye]

I had this same issue whilst importing Bootstrap into my application.

In the end I just used the longform import:

@import '../node_modules/bootstrap/scss/bootstrap'

[TotomInc]

Any plans on this?

[eirikb]

The solution by @tomatau works for me, thanks! It would really be nice if this fix was part of parcel somehow, as I think this is very common thing to do.
@bfred-it I don't think that approach works if the file.scss again imports stuff from other dependencies, like material-components-web does with @material/button : @import "@material/ripple/common";

[TotomInc]

@eirikb how did this works for you? It looks like parcel doesn't take my .sassrc.js configuration file. I have done the same steps and I'm running parcel with --no-cache flag.

[eirikb]

@TotomInc This is how I did it: https://gist.github.com/eirikb/ea6248feab5411a5e4a6bf720ab984fe . I didn't need the --no-cache flag, or at least it doesn't seem so.
The demo is missing src folder simply because of gist.
Run like this:

nvm use 8.10.0
git clone https://gist.github.com/eirikb/ea6248feab5411a5e4a6bf720ab984fe demo
cd demo
npm i && npm start

[TotomInc]

Thanks for taking the time to do a gist @eirikb, it really helps a lot! 😄

[matthewmorgan]

@erikb your approach worked for me but only using --no-cache. Thanks for that.

[safareli]

using .sassrc.js messes staff up see #1280 so solution from @tomatau is not quite a solution until #1280 is fixed

[safareli]

~The .sassrc.js messes watch too, see #1291~

~So to sum up until #1291 and #1280 are fixed .sassrc.js is not a solution~

[dobesv]

One workaround is to symlink the node_modules path into your source tree, e.g.

ln -s ../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap bootstrap

And then remove the .sassrc.js if you had created one.

[DanielRuf]

I guess there are still just workarounds and no real fixes or the "right" solution.
I'm a bit sad to see that Parcel started so strong and now has so many (small) issues which make the dev life harder again as most devs need a bit more complex configs for bigger projects.

That is one of the reasons why I evaluated Parcel for my frontend colleagues and decided against it as it would have reduced all the possibilities, introduced new issues and hurdles and created a new whole ecosystem (we work on enterprise projects so it is crucial for such big teams to have a reliable solution without changing the whole toolchain and workflows).

How can we (the community) support Parcel and bring it forward or what is the current status of it?

[thiagovilla]

We could start by listing and prioritizing the current issues, gathering who's interested in improving Parcel, and then (optional: split into teams and) start working.

[DanielRuf]

That would be great as I see much interest in the community and possibly people who could solve the issues together.

[franz899]

What about integrating https://github.com/sass-eyeglass/eyeglass?

I've created a small example, its just two lines of code and it solves the problem of importing sass files from node_modules.

I still have to add tests for it.

[is-already-taken]

Indeed, it works! Though what I find spooky is the fact that mentioning the name of the missing dependency Buffer in a comment or string includes it in the bundle:

import fs from 'fs';

// Magically include missing dependency "Buffer" by merely mentioning the word. :O

(function() {
    var styles = fs.readFileSync('./index.css');

    console.log(styles);

    var head = document.getElementsByTagName("head")[0],
        style;

    style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.innerText = styles;

    head.appendChild(style);
})();

Running the resulting 24 KB Javascript (scnr) in a browser works fine. When the comment is removed Chrome 67 throws Uncaught ReferenceError: Buffer is not defined.

The HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <script src="dist/index.js" type="text/javascript"></script>
</body>
</html>

Built with: node_modules/.bin/parcel build index.js

$ cat node_modules/parcel-bundler/package.json  | grep "version"
  "version": "1.9.1"

Without the magically included Buffer stuff, the resulting Javascript is 1.4 KB small which is quite fine. :smile:

Note: I accidentally found this while trying to workaround the exception using const Buffer = atob;.

[LukBukkit]

I'm using the package node-sass-package-importer with this you can use ~ for importing from the node_modules and it includes css files, if you omit the .css extension.
As a result a scss file could look like this:

// Importing a css file from the node_modules
@import "~frappe-charts/dist/frappe-charts.min";

// Importing a scss file from the node_modules
@import "~uikit/src/scss/uikit-theme.scss";

To you this node-sass importer install the package and create a .sassrc.js file:

const packageImporter = require('node-sass-package-importer');

module.exports = {
    importer: [
        packageImporter()
    ]
};

I hope this can help you guys 😉

[michaelpumo]

I couldn't get Parcel to import CSS files from node_modules within SCSS files, but for what it's worth, it works within JS files.

I needed to use normalize.css from node_modules, so I simply imported the CSS from within my app.js (entry file) like so:

/js/app.js

import '../node_modules/normalize.css/normalize.css'

This appeared to work just fine and upon running parcel build ./js/app.js, the CSS is combined into the app.css file that Parcel produces (as expected).

Hope this helps someone.

[alexandernst]

Why can't parcel handle all this nonsense by it's own?!

[phifa]

What is the recommended practive here? @DanielRuf were you able to get it working with foundation? I am looking for a faster alternative when working with webpack and foundation.

[DanielRuf]

What is the recommended practive here? @DanielRuf were you able to get it working with foundation? I am looking for a faster alternative when working with webpack and foundation.

A faster alternative for webpack + Foundation?
It depends.

Do you want to keep webpack or use Parcel?
We tried Parcel but it had too many issues at the time and did not test further. Our setups are all with current webpack versions.

[figalex]

Indeed, it works! Though what I find spooky is the fact that mentioning the name of the missing dependency Buffer in a comment or string includes it in the bundle:

@is-already-taken did you ever figure out why do you need the "magic" comment including the word "Buffer"?
I had the same problem and that magic comment solved it but I don't like magic 🙃

[juniorgarcia]

Right here I'm importing like

@import "~bootstrap/scss/grid";

and my .sassrc is like

{
    "includePaths": ["node_modules"]
}

.sassrc must be in the root of the project from where you are executing Parcel.

Everything is working fine with Parcel v1.10.3.

[bionicles]

getting this problem. frustrating because I thought parcel was meant to be simpler and easier than webpack -- it can't find Bulma sass files?

fixed by adding .sassrc as @juniorgarcia
{
"includePaths": ["node_modules"]
}

seems like something great to add by default so we can style with style

[coder82]

@juniorgarcia that worked!

[blowsie]

Why can't parcel handle all this nonsense by it's own?!

My first time using parcel and I have some level of agreement with this statement since parcel is a "zero configuration web application bundler"

[molecule]

Is there any resolution or recommended work-around for this?
I've tried all the above solutions, and none work:

This is my .sassrc:
{ "includePaths": ["node_modules"] }

This is my .sassrc.js:
`
const path = require('path')

const CWD = process.cwd()

module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules'),
path.resolve(CWD, 'src')
]
}
`

I get this error:

/path/to/Projects/nuked/app/static/css/main.scss:1:1: Cannot resolve dependency '~/node_modules/normalize.css/normalize.css' at '/path/to/Projects/nuked/app/static/css/~/node_modules/normalize.css/normalize.css'