Sass in local package from node_modules

help
1

Hello
I tried to get this to work the whole afternoon and fear I can not see the wood for the trees anymore.
The task seems to be simple enough.
I have a local package. In package.js I add my scss file like this:

api.addFiles('lib/stylesheets/main.scss', 'client');
It gets processed by fourseven:scss.

Within main.scss i try to import node_modules/bootstrap/scss/bootstrap.scss.

I tried to make a symlink in my package directory to node_modules, i made a scss-config.json file for fourseven:scss pointing to node_modules/bootstrap/scss/ in the root dir of my project, i tried many paths with @import in my scss file… and all possible variations.

Can anyone please tell my how to do this? Where exactly do i have to create the simlink? How does the import statement look like? Or am i on the wrong track?

Thanks Markus

2

You said package.json, but the code you showed is for package.js

Maybe you just put it in the wrong file?

1 Like
3

@robfallows
Thanks for your reply. I named the wrong file in my post. I meant package.js.

Anyone else?

4

You’ve got to use {} to point to the root of the app:

@import '{}/node_modules/npm-package-name/button.scss';

See:

5

Thank you :slight_smile:

I’m pretty sure i tried this right at the beginning (as its part of the docs) and got an error. However, it seems to work now, so it was some kind of a wood-tree thing :wink:. Although i changed two things and in between i had to restart meteor and one time i even had to kill the process.

First i updated the fourseven:scss form 4.5.0 to 4.9.3.
The second change was to add fourseven:scss to my project dependencies.
My app consists only of packages. There is no code in the “base app”. In the package where i tried to import bootstrap.scss i added fourseven:scss as dependency. When i added the path you suggested i got the following error:

Scss compiler error: Error: _includePaths is not iterable
on line 5 of {my:package}/lib/stylesheets/main.scss
>> @import "{}/node_modules/bootstrap/scss/bootstrap.scss"

As i could not remember to have seen this error before i tried to add an scss file in my base app and therefore added fourseven:scss to my base app. After restarting my app the import of bootstrap.scss in the base app worked. So i tried again importing it in my package and it worked. But after cleaning up my base app and removing all files and changes from my test the error reappeared. Only when i readded the fourseven:scss dependency in my base app and restared meteor it worked. In my opinion the dependency in my package should suffice.

Anyhow im happy it works now, so thanks again.

1 Like
6

Hi folks,

I am trying to apply your comments in a project that I’m doing using Vulcan JS. Here is my situation.

I added to my /.meteor/packages

# see http://docs.vulcanjs.org/packages
############ Meteor Packages   ############

fourseven:scss@4.9.3

############ Vulcan Packages   ############
vulcan:core
vulcan:i18n-en-us
vulcan:ui-bootstrap

############ Accounts Packages ############

accounts-password@1.5.1
# accounts-twitter
# accounts-facebook

############ Your Packages ############

next-town

Inside my /packages/next-town/package.js

Package.describe({
  name: 'next-town',
});

Package.onUse((api) => {
  api.use([
    'vulcan:core',

    // SASS/SCSS support

    'fourseven:scss@4.9.3'
  ]);

  api.addFiles('lib/stylesheets/style.scss');
  api.mainModule('lib/server/main.js', 'server');
  api.mainModule('lib/client/main.js', 'client');
});

But ths instructions
@import "node_modules/bootstrap/scss/bootstrap.scss";
@import "{}/node_modules/bootstrap/scss/bootstrap.scss";
doesn’t work.

The curious thing is that for less this instruction works like a charm.

@import "{}/node_modules/antd/dist/antd.less";

Thanks in advance for any recommendation.

7

What version of meteor are you on?

Note the recommended minimum version:

Meteor Version Recommended fourseven:scss version
1.4.0 3.8.1
1.4.1+ 4.5.4
1.6+ 4.10.0

And this note for Meteor 1.7+

Note that Meteor 1.7 introduced a change so that files in node_modules aren’t automatically compiled any more. This requires you to add a symlink inside the imports directory to the pacakge in order for compilation to work. E.g.

meteor npm install the-package
cd imports
ln -s ../node_modules/the-package .

See the meteor changelog for more information.

1 Like
8

Thank @coagmano the version 4.10.0 do the magic

1 Like