Meteor 1.2.0.2 - SCSS import breaks

help
1

As of Meteor 1.2.0.2, there are problems with importing SCSS files from other SCSS files. I’m using fourseven:scss, and I get errors like the below when I try to run my app:

/client/pages/Product/Product.scss: Scss compiler error: File to import:
client/styles/variables.import.scss not found. Import origin:
/client/pages/Product/Product.scss

The line in Product.scss is this:

@import "client/styles/variables.import.scss";

I’ve downgraded to Meteor 1.2.0.1 in the mean time, but thought I’d report this.

2

You’re supposed to use @import {}/client/styles/variables.import.scss; IIRC

3

Well, that got rid of the errors mentioned above, but now I’ve got a new one:

W20150929-12:38:13.533(-7)? (STDERR) ReferenceError: Plugin is not defined
W20150929-12:38:13.533(-7)? (STDERR)     at path (caching-compiler.js:1:12)
W20150929-12:38:13.533(-7)? (STDERR)     at /Volumes/SuperData/Sites/myapp/.meteor/local/build/programs/server/packages/caching-compiler.js:482:4
W20150929-12:38:13.533(-7)? (STDERR)     at multi-file-caching-compiler.js:216:2
W20150929-12:38:13.534(-7)? (STDERR)     at /Volumes/SuperData/Sites/myapp/.meteor/local/build/programs/server/boot.js:242:10
W20150929-12:38:13.534(-7)? (STDERR)     at Array.forEach (native)
W20150929-12:38:13.534(-7)? (STDERR)     at Function._.each._.forEach (/Users/samh/.meteor/packages/meteor-tool/.1.1.9.1sd3e7j++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20150929-12:38:13.534(-7)? (STDERR)     at /Volumes/SuperData/Sites/myapp/.meteor/local/build/programs/server/boot.js:137:5
4

Yeah, alas, I have that same error and I am trying to figure it out right now :\

5

I’ll report this on GitHub

6

By chance, are you using a framework like meteoric:ionic-sass? Removing that fixed it for me

7

Nope.

check                      1.0.6  Check whether a value matches a pattern
ecmascript                 0.1.4* Compiler plugin that supports ES2015+ in al...
ejson                      1.0.7  Extended and Extensible JSON library
fastclick                  1.0.7  Faster touch events on mobile
fortawesome:fontawesome    4.4.0  Font Awesome (official): 500+ scalable vect...
fourseven:scss             3.2.0* Style with attitude. Sass and SCSS support ...
jquery                     1.11.4  Manipulate the DOM using CSS selectors
kadira:flow-router         2.6.2  Carefully Designed Client Side Router for M...
kadira:react-layout        1.3.1  Layout Manager for React with SSR Support
logging                    1.0.8  Logging facility.
meteor-base                1.0.1  Packages that every Meteor app needs
meteorhacks:fast-render    2.10.0  Render your app before the DDP connection ...
mobile-experience          1.0.1  Packages for a great mobile user experience
momentjs:moment            2.10.6  Moment.js (official): parse, validate, man...
mongo                      1.1.1* Adaptor for using MongoDB and Minimongo ove...
random                     1.0.4  Random number generator and utilities
react                      0.1.13  Everything you need to use React with Meteor.
reload                     1.1.4  Reload the page while preserving applicatio...
session                    1.1.1  Session variable
spacebars                  1.0.7  Handlebars-like template language for Meteor
standard-minifiers         1.0.0* Standard minifiers used with Meteor apps by...
static-html                1.0.1* Define static page content in .html files
stevezhu:lodash            3.10.1  A utility library delivering consistency, ...
tracker                    1.0.8* Dependency tracker to allow reactive callbacks
twbs:bootstrap             3.3.5  The most popular front-end framework for de...
8

Try @import 'variables.import.scss'; It works for me.

9

It works now, it was a bug in fourseven:scss! And yes, the correct syntax is indeed @import "{}/path/to/file.import.scss".

1 Like
10

I am trying to do the same but I can’t make it work I have tried:

@import '{}../../public/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import "{}../../public/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import '../../public/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import "../../public/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

Again, same error with fourseven:scss meteor package

11

{} = project root level, so you don’t need to do {}../... And if you’re trying to access a file in a package, the format is {packageName}/path/to/file.

12

I had a friend fix it doing the following:

Run Meteor
Comment out the
@import ‘.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/_ionic’;
@import ‘.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/_ionicons’;

Let it rebuild -you should get an app with no styling
Then comment back in and the project will load correctly

13

I’m using bourbon and am having to go through the index files to add in the full path to get it to work. e.g. in client/sass/bourbon/_bourbon.scss I’m changing about 70 lines like so:

@import "settings/prefixer";

to

@import "{}/client/sass/bourbon/settings/prefixer";