[[email protected]] import stylesheet from npm package #165

sunstorymvp · 2016-01-22T11:16:26Z

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";

The text was updated successfully, but these errors were encountered:

sebakerckhof · 2016-01-22T13:00:46Z

This is being discussed here: meteor/meteor#6037

vitalyrotari · 2016-01-26T07:52:16Z

Does not see any .scss file in the project on [email protected].
Any ideas on this subject?

sebakerckhof · 2016-01-26T08:27:44Z

@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 · 2016-01-26T08:40:33Z

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 · 2016-01-26T09:00:02Z

Problem solved :)
Update compile-scss.js file

sebakerckhof · 2016-01-26T09:12:34Z

Can you create a PR

vitalyrotari · 2016-01-26T10:33:19Z

@sebakerckhof a bit later will do ;)

tjmonsi · 2016-02-02T00:56:28Z

Is this working already?

sergiotapia · 2016-02-02T17:27:07Z

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 · 2016-02-02T19:38:00Z

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: sass/node-sass#1192

HZSamir · 2016-02-17T08:34:57Z

Is this issue still pending? Any new development?

skirunman · 2016-03-18T22:25:32Z

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

bliitzkrieg · 2016-03-20T03:47:09Z

I am also looking for a solution to this

tommy0311 · 2016-03-20T11:19:56Z

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

mbarqawi · 2016-04-16T20:10:50Z

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

skirunman · 2016-04-16T20:57:12Z

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 · 2016-05-13T17:58:09Z

@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 · 2016-05-14T13:01:21Z

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

iameli · 2016-05-25T18:31:02Z

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.

…bug.

kashifnazar · 2016-10-19T14:08:59Z

I am trying this

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

But it yields the following error.

Unexpected token (3:1)

Valodya · 2016-11-18T22:09:06Z

any updates?

yanickrochon · 2016-11-29T15:51:10Z

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

sebakerckhof · 2016-12-01T23:10:22Z

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 · 2017-03-11T18:03:02Z

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 · 2017-04-04T14:09:04Z

@sebakerckhof Any guidance or help would be good.

yanickrochon · 2017-04-12T16:07:45Z

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 · 2017-05-25T10:44:18Z

@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 · 2017-05-28T15:42:23Z

@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 · 2017-05-28T18:29:25Z

@skirunman thank you.

derwaldgeist · 2017-07-10T23:11:08Z

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 · 2017-09-13T11:07:41Z

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

StorytellerCZ · 2021-06-29T20:20:56Z

Closing in favor of #309

MilosStanic mentioned this issue Mar 23, 2016

[Meteor 1.3-beta.16] npm client-side lib import scenario Urigo/angular2-meteor#171

Closed

iameli mentioned this issue May 25, 2016

[1.3.2+] Can't import css contained in npm package (from a @import in another css) meteor/meteor#6846

Closed

frenchbread referenced this issue in frenchbread/apinf-dashboard-example Aug 9, 2016

downgraded to older version of nvd3, which is in npm. This fixed the …

c991c92

…bug.

sebakerckhof mentioned this issue Apr 11, 2017

Can it compile SASS located in node_modules? #195

Closed

pilarArr mentioned this issue Jul 31, 2017

Can't import from node_modules #250

Closed

pilarArr mentioned this issue Sep 13, 2017

Can't import css files from node_modules #264

Open

StorytellerCZ closed this as completed Jun 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[[email protected]] import stylesheet from npm package #165

[[email protected]] import stylesheet from npm package #165

sunstorymvp commented Jan 22, 2016

sebakerckhof commented Jan 22, 2016

vitalyrotari commented Jan 26, 2016

sebakerckhof commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

sebakerckhof commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

tjmonsi commented Feb 2, 2016

sergiotapia commented Feb 2, 2016

sebakerckhof commented Feb 2, 2016

HZSamir commented Feb 17, 2016

skirunman commented Mar 18, 2016

bliitzkrieg commented Mar 20, 2016

tommy0311 commented Mar 20, 2016

mbarqawi commented Apr 16, 2016

skirunman commented Apr 16, 2016 •

edited

Loading

patrickml commented May 13, 2016

ikhsanalatsary commented May 14, 2016 •

edited

Loading

iameli commented May 25, 2016

kashifnazar commented Oct 19, 2016

Valodya commented Nov 18, 2016

yanickrochon commented Nov 29, 2016

sebakerckhof commented Dec 1, 2016

ilan-schemoul commented Mar 11, 2017 •

edited

Loading

rafinskipg commented Apr 4, 2017

yanickrochon commented Apr 12, 2017

nosizejosh commented May 25, 2017

skirunman commented May 28, 2017

nosizejosh commented May 28, 2017

derwaldgeist commented Jul 10, 2017

pilarArr commented Sep 13, 2017

StorytellerCZ commented Jun 29, 2021

[[email protected]] import stylesheet from npm package #165

[[email protected]] import stylesheet from npm package #165

Comments

sunstorymvp commented Jan 22, 2016

sebakerckhof commented Jan 22, 2016

vitalyrotari commented Jan 26, 2016

sebakerckhof commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

sebakerckhof commented Jan 26, 2016

vitalyrotari commented Jan 26, 2016

tjmonsi commented Feb 2, 2016

sergiotapia commented Feb 2, 2016

sebakerckhof commented Feb 2, 2016

HZSamir commented Feb 17, 2016

skirunman commented Mar 18, 2016

bliitzkrieg commented Mar 20, 2016

tommy0311 commented Mar 20, 2016

mbarqawi commented Apr 16, 2016

skirunman commented Apr 16, 2016 • edited Loading

patrickml commented May 13, 2016

ikhsanalatsary commented May 14, 2016 • edited Loading

iameli commented May 25, 2016

kashifnazar commented Oct 19, 2016

Valodya commented Nov 18, 2016

yanickrochon commented Nov 29, 2016

sebakerckhof commented Dec 1, 2016

ilan-schemoul commented Mar 11, 2017 • edited Loading

rafinskipg commented Apr 4, 2017

yanickrochon commented Apr 12, 2017

nosizejosh commented May 25, 2017

skirunman commented May 28, 2017

nosizejosh commented May 28, 2017

derwaldgeist commented Jul 10, 2017

pilarArr commented Sep 13, 2017

StorytellerCZ commented Jun 29, 2021

skirunman commented Apr 16, 2016 •

edited

Loading

ikhsanalatsary commented May 14, 2016 •

edited

Loading

ilan-schemoul commented Mar 11, 2017 •

edited

Loading