[METEOR@1.3] import stylesheet from npm package

[sunstorymvp]

just wonder is it possible?

1.3 introduces better npm support so we can just do npm install foundation-sites --save for example, but how to use it?

it's so easy to import js:

import Foundation from 'foundation-sites';

but in SCSS nothing of this works:

@import "{}/node_modules/foundation-sites/scss/foundation";
@import "node_modules/foundation-sites/scss/foundation";
@import "{}/foundation-sites/scss/foundation";
@import "foundation-sites/scss/foundation";

[sebakerckhof]

This is being discussed here: https://github.com/meteor/meteor/issues/6037

[vitalyrotari]

Does not see any .scss file in the project on METEOR@1.3-modules-beta.4. Any ideas on this subject?

[sebakerckhof]

@vitalyrotari Well, we just process the scss files Meteor tool feeds us. So this would require changes to meteor tool. Not much we can do with this package.

[vitalyrotari]

I think the problem is in the importer method. I am trying to figure out where in the issue, but for now without any results :(

[vitalyrotari]

Problem solved :) Update compile-scss.js file

[sebakerckhof]

Can you create a PR

[vitalyrotari]

@sebakerckhof a bit later will do ;)

[tjmonsi]

Is this working already?

[sergiotapia]

Just ran into this issue @sebakerckhof. I created a new Meteor 1.2 project, added the fourseven:scss package, then npm install bulma.

This created the css files in node_modules:

$ tree node_modules/bulma/
node_modules/bulma/
├── LICENSE
├── README.md
├── bower.json
├── bulma
│   ├── base
│   │   ├── base.sass
│   │   ├── content.sass
│   │   ├── generic.sass
│   │   ├── helpers.sass
│   │   └── highlight.sass
│   ├── components
│   │   ├── card.sass
│   │   ├── components.sass
│   │   ├── grid.sass
│   │   ├── media.sass
│   │   ├── menu.sass
│   │   ├── navbar.sass
│   │   ├── table.sass
│   │   └── tabs.sass
│   ├── config
│   │   ├── generated-variables.sass
│   │   └── variables.sass
│   ├── elements
│   │   ├── buttons.sass
│   │   ├── controls.sass
│   │   ├── elements.sass
│   │   ├── messages.sass
│   │   ├── notifications.sass
│   │   └── titles.sass
│   ├── layout
│   │   ├── footer.sass
│   │   ├── header.sass
│   │   ├── hero.sass
│   │   ├── layout.sass
│   │   └── section.sass
│   └── utilities
│       ├── animations.sass
│       ├── functions.sass
│       ├── mixins.sass
│       ├── reset.sass
│       └── utilities.sass
├── bulma.sass
├── css
│   ├── bulma.css
│   ├── bulma.css.map
│   ├── bulma.min.css
│   └── bulma.min.css.map
├── images
│   └── bulma-banner.png
└── package.json

9 directories, 41 files

Then I manually created client/stylesheets/bulma.sass:

@import ../node_modules/bulma/bulma/utilities/utilities
@import ../node_modules/bulma/bulma/config/variables
@import ../node_modules/bulma/bulma/config/generated-variables
@import ../node_modules/bulma/bulma/base/base
@import ../node_modules/bulma/bulma/elements/elements
@import ../node_modules/bulma/bulma/components/components
@import ../node_modules/bulma/bulma/layout/layout

And I get:

 While processing files with fourseven:scss (for target web.browser):
   /client/stylesheets/bulma.sass: Scss compiler error: File to import: {}/client/node_modules/bulma/bulma/utilities/utilities not found in
   file: /Users/sergiotapia/Work/nanote/{}/client/stylesheets/bulma.sass

[sebakerckhof]

Filenames of file to import need to start with an underscore, otherwise meteor does not see the file as an import.

But even then it won't work due to a bug in lib-sass with old sass (indented syntax) files: https://github.com/sass/node-sass/issues/1192

[HZSamir]

Is this issue still pending? Any new development?

[skirunman]

@sebakerckhof Any update on this or the PR from @vitalyrotari, thanks!

[bliitzkrieg]

I am also looking for a solution to this

[tommy0311]

I follow these steps in meteor1.3, it works well https://github.com/tableflip/meteor-sass-bootstrap4

[mbarqawi]

any solution to this issue , because the bootstrap solution is too much complex

[skirunman]

Meteor 1.3.2 should allow you to import scss files.

@import '{}/node_modules/foundation-sites/scss/foundation.scss';

See this repo for an example: https://github.com/juliancwirko/meteor-npm-foundation-test Also, Bootstrap 4 example: https://github.com/juliancwirko/meteor-bootstrap-npm-test

[patrickml]

@skirunman does it only work if the file is SCSS? I am unable to get it to work with CSS files @import "{}/node_modules/quill/dist/quill.css";

[ikhsanalatsary]

@skirunman you can add css file in your js file. for instance: import '../../../../node_modules/sweetalert/dist/sweetalert.css';

[iameli]

That solution works just fine for CSS files, but it doesn't work for SCSS imports. I can't use that method to import mixins and such from an NPM module. Cross-referencing my response on meteor/meteor#6846 here.

[kashifnazar]

I am trying this

@import '{}/node_modules/slick-carousel/slick/slick-theme.scss';

But it yields the following error.

Unexpected token (3:1)

[Valodya]

any updates?

[yanickrochon]

As an effort to support npm, where is this issue currently at?

[sebakerckhof]

I recently moved to the bay area so I'm currently too busy to look into it, but a pull request would be accepted.

[ilan-schemoul]

Sorry but as Meteor tries to get closer to JS land it's incredibly important to being able to @import css files from npm packages, so is there any update ? Importing via js is not always the good way as we may need the toolchain for his essentials features (compression, vendor prefix etc.) EDIT : ping @sebakerckhof

[rafinskipg]

@sebakerckhof Any guidance or help would be good.

[yanickrochon]

After updating a few Meteor packages (also npm packages) any CSS files imported from my JS modules are no longer imported. Also, @import ... from my SCSS yield

While processing files with fourseven:scss (for target web.browser):
   /client/styles/global.scss: Scss compiler error: File to import: {}/node_modules/normalize.css/normalize.css not found in file:
   /path/to/project/{}/client/styles/global.scss

[nosizejosh]

@skirunman any updates on this issue please? I am currently doing this import '../../../../node_modules/sweetalert/dist/sweetalert.css'; as workaround but it doesn't look ...

[skirunman]

@nosizejosh Sorry, but have not kept up on this as we are no longer using SASS or importing directly from node_modules. Hope you find a solution.

[nosizejosh]

@skirunman thank you.

[derwaldgeist]

Hey, I tried to - finally upgrade - my app to Meteor 1.3. But as in any other upgrade, fourseven:scss is causing the biggest problems. Now I stumbled upon this issue, trying to import styles from npm modules I had previously imported using mquandalle:bower. I hoped that - after so many months - this would have been fixed in the meantime. But is it really still open? I was also wondering how to import fonts that are referenced in SASS files. It was so easy using mquandalle:bower in 1.2, but now I am running into this upgrade nightmare.

[pilarArr]

This is being discussed here as well meteor/meteor/6846

[StorytellerCZ]

Closing in favor of #309