-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Importing CSS from node_modules #39
Comments
The node_modules resolution algorithm isn't implemented yet for SASS/SCSS. Currently you could make a 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. |
Sounds good - thanks! |
@devongovett I tried it with
|
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 |
Same here. It resolves some but not all, especially subdirs. |
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. |
@StarpTech maybe there is one at https://github.com/danielruf/awesome-bundlers |
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. |
I've been fighting with this for a while using .sassrc as a JSON object and yaml, neither worked. 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 |
@tomatau thanks - this work like a charm!
|
I am still having the same issue even though I added 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) |
Working like a charm here with |
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 |
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' |
Any plans on this? |
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. |
@eirikb how did this works for you? It looks like parcel doesn't take my |
@TotomInc This is how I did it: https://gist.github.com/eirikb/ea6248feab5411a5e4a6bf720ab984fe . I didn't need the nvm use 8.10.0
git clone https://gist.github.com/eirikb/ea6248feab5411a5e4a6bf720ab984fe demo
cd demo
npm i && npm start |
One workaround is to symlink the node_modules path into your source tree, e.g.
And then remove the |
I guess there are still just workarounds and no real fixes or the "right" solution. 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? |
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. |
That would be great as I see much interest in the community and possibly people who could solve the issues together. |
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. |
Indeed, it works! Though what I find spooky is the fact that mentioning the name of the missing dependency
Running the resulting 24 KB Javascript (scnr) in a browser works fine. When the comment is removed Chrome 67 throws The HTML:
Built with:
Without the magically included Buffer stuff, the resulting Javascript is 1.4 KB small which is quite fine. 😄 Note: I accidentally found this while trying to workaround the exception using |
I'm using the package node-sass-package-importer with this you can use // 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 const packageImporter = require('node-sass-package-importer');
module.exports = {
importer: [
packageImporter()
]
}; I hope this can help you guys 😉 |
I couldn't get Parcel to import CSS files from I needed to use /js/app.js
This appeared to work just fine and upon running Hope this helps someone. |
Why can't parcel handle all this nonsense by it's own?! |
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? Do you want to keep webpack or use Parcel? |
@is-already-taken did you ever figure out why do you need the "magic" comment including the word "Buffer"? |
Right here I'm importing like @import "~bootstrap/scss/grid"; and my {
"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. |
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 seems like something great to add by default so we can style with style |
@juniorgarcia that worked! |
My first time using parcel and I have some level of agreement with this statement since parcel is a "zero configuration web application bundler" |
Include bundle id, name, and size in parcel-bundle-stats Approved-by: Will Binns-Smith Approved-by: Stacy London
Is there any resolution or recommended work-around for this? This is my .sassrc: This is my .sassrc.js: const CWD = process.cwd() module.exports = { I get this error:
|
For me, simply writing |
v2 Merge: 2021-04-19 Approved-by: Marcin Szczepanski Approved-by: Gora Kong
Hi,
Looks very cool!
I have a SCSS file in a project that imports CSS from
node_modules
using@import
declaration:When I run parcel I get the following error:
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
fromnode_modules
?The text was updated successfully, but these errors were encountered: