Sass does not seem to be working #143

Closed
jasonify opened this Issue May 17, 2012 · 27 comments

Projects

None yet
@jasonify

sass.css file included seems to be blank.

@michaelforrest

I'm getting this too. I can't make SCSS files work either.

@TomWij
Contributor
TomWij commented May 25, 2012

SCSS support is certainly not there, I couldn't get SASS to work well either. Consider temporarily using LESS...

@dtt101
dtt101 commented May 27, 2012

+1 - I created a new meteor project from scratch, made a /client directory and added a file with .sass, and am just receiving a blank file, though the amount of blank lines does vary depending on the length of my .sass file.

@fredriksundstrom

I'm in the same place as you guys. What's up with that?

@charles-luv

+1

@ibash
Contributor
ibash commented Jun 10, 2012

The problem is the npm sass module... quick fix, change your sass extensions to styl, and it'll compile just the same.
IMO the sass npm module should be gotten rid of in meteor, or just make stylus handle the sass extension anyway.

@makevoid

I use the sass ruby gem to watch and compile sass to css, example here: https://github.com/makevoid/meteor-todo-coffee-sass
It would be nice to have it integrated into meteor thou!

@zeke
zeke commented Aug 27, 2012

As of Meteor v0.3.9, this problem persists. For the time being I've begrudgingly switched my project to stylus.

$ meteor --version
Meteor version 0.3.9 (92b848fe1a)
@hoolymama

@makevoid's solution seems the easiest so I'm using that. Thanks!!

Before that, I tried fixing both meteor's sass and less packages. I couldn't get '@import' to work for less, and I couldn't get sass to output anything because the compile function in the sass package just does a join(), but its input is an array of objects with children and properties etc., so it silently fails.

I guess if you wanted to use less you could install guard or something to detect changes and compile.

@glasser
Member
glasser commented Sep 7, 2012

I can't reproduce this bug without a more specific example. Please reopen this bug if you have a github repository I can clone and a set of instructions that reproduces this bug. Thanks!

@glasser glasser closed this Sep 7, 2012
@outluch
outluch commented Sep 28, 2012

I can help to reproduce this bug. And i am in irc#meteor everyday. My name is outluch or workout (work account)

@glasser
Member
glasser commented Sep 28, 2012

OK, I mean, I don't actually know the SASS language, so in order to try to reproduce I'd have to learn it and come up with a sample file, etc. Much easier if somebody who cares more about SASS than I do creates a Meteor project that I can just "git clone" which reproduces the issue...

@glasser
Member
glasser commented Sep 28, 2012

I mean, I put this (from the test files) into foo.sass in a new Meteor project:

#sass-tests
  :zoom 1

dashy: dashed

.sass-dashy-left-border
  :border-left 1px !dashy black

and ran "meteor" and the processed version ended up in the css file. So it's not 100% broken. Leaving closed until somebody gives a clear reproduction of this issue.

@glasser
Member
glasser commented Sep 28, 2012

OK, I think the problem is twofold:

  • sass.js has very poor error reporting, so using unrecognized syntax just leads to missing output
  • sass.js is old and unsupported and based on a very old version of the syntax documented at http://sass-lang.com/

Specifically, you want to set properties with :background-color red rather than background-color: red.

This sass.js package appears to be unmaintained; the author has moved on to Stylus. We should either drop sass support from Meteor, or switch to the node-sass NPM package, which seems better maintained (it has a C dependency). Would accept a pull request to do that! Update admin/generate-dev-bundle.sh and update the package to use the other API...

@outluch
outluch commented Oct 1, 2012

Thanks!
I wanted to setup sass for me only because of Foundation framework, made on sass.
I like stylus more than sass, as that author :)

28.09.2012, â 21:43, David Glasser notifications@github.com íàïèñàë(à):

OK, I think the problem is twofold:

sass.js has very poor error reporting, so using unrecognized syntax just leads to missing output
sass.js is old and unsupported and based on a very old version of the syntax documented at http://sass-lang.com/
Specifically, you want to set properties with :background-color red rather than background-color: red.

This sass.js package appears to be unmaintained; the author has moved on to Stylus. We should either drop sass support from Meteor, or switch to the node-sass NPM package, which seems better maintained (it has a C dependency). Would accept a pull request to do that! Update admin/generate-dev-bundle.sh and update the package to use the other API...


Reply to this email directly or view it on GitHub.

@glasser glasser reopened this Oct 2, 2012
@secretgspot

This is confusing? How do you use sass component? By default meteor creates name.css using sass/scss inside of css made no difference. Renaming css to .css.sass or .css.scss made no difference. Documentation is very poor.

@glasser
Member
glasser commented Oct 5, 2012

Yes, sass package is basically broken and we have to figure out whether to
replace it with a better implementation or remove it. We're also pretty
distracted by finishing up Meteor Accounts :)

A pull request to replace our use by use of the node-sass package would be
reviewed...

@glasser glasser added a commit that referenced this issue Oct 15, 2012
@glasser glasser Add a warning about the brokenness of the sass package to the docs (i…
…ssue #143).

sass.js implements a version of Sass much older than the .sass (let alone
currently recommended .scss) described at sass-lang.com, and has poor error
handling so it mostly just ends up confusing users. sass.js's author now uses
stylus/nib. We should probably remove the sass package, but let's not add
another breaking change to 0.5.0.
1fe86fa
@glasser glasser added a commit that closed this issue Nov 5, 2012
@glasser glasser Remove the 'sass' package, as warned in 0.5.0.
Meteor's sass package wraps the "sass" NPM module, which implements a version of
the Sass language much older than the .sass described at sass-lang.com (and
doesn't implement the current recommended .scss language at all). It also has
poor error handling, so it mostly just ends up confusing users.

The module is unmaintained, and its author now uses stylus/nib (which Meteor
supports: see the stylus package).

If many users want Sass support, we could add this back in wrapping the
"node-sass" package instead (which supports a more recent version of the Sass
language), but for now, just remove it. Meteor still supports Stylus and Less
out of the box.

Fixes #143.
a5cc93e
@glasser glasser closed this in a5cc93e Nov 5, 2012
@chriswallace

Why is SASS not supported?

@glasser
Member
glasser commented Feb 9, 2013

@chriswallace Read the thread. We supported it initially via a node package which turned out to be unmaintained and diverged significantly from the latest documented SASS file formats (and also had no error handling). I suggested that anyone who cared about SASS could give us a pull request to replace it with the superior sass implementation. Nobody did, so eventually I removed it. It seems like folks are pretty happy with the other two CSS preprocessors that ship with Meteor (less and stylus/nib).

That pull request request is stil open though...

@chriswallace

I see. It would be amazing if we could get some Sass/Compass support up in here but I understand the time/effort required to get that implemented. I find Stylus and LESS to be inferior to Sass/Compass, as do other experts on the matter.

I think we may just use CodeKit to compile our Sass files for the time being, which sucks, but it's not the end of the world.

@plapier
plapier commented Feb 18, 2013

I prefer Sass over Less or stylus. I would like to see Sass implemented in meteor, and tip my hat to anyone that has the chops for it.

@matthewsimo

I agree with the favor for Sass/Compass, to get around it, I just put my Sass files in /tests/sass/ and tell it to compile to wherever you want your css. Just set the watch and let it handle itself. This isn't the cleanest way, I agree, it'd be nicer if say, for instance, that Meteor would ignore files/directories starting with an underscore when it goes to make a build. Just a thought, but it'd potentially make it easier to use current workflow enhancing tools that aren't baked into Meteor itself. You can see an example of this layout here. Thanks, and happy coding.

@ckizer
ckizer commented Apr 16, 2013

I prefer stylus but can someone please tell me how to "switch" my project to stylus? I have folders of sass that doesn't compile…

@Fandekasp

Is there any progress on this feature ?

Right now, I have to compile my sass files with compass compile, then commit the css files in a herokee branch, and push that branch to heroku in order for it to deploy my styles correctly.
a meteor-compass packages that can teach heroku how to compile sass to css and deploy would be great, removing the need for a separate branch as well.

@zeke
zeke commented Jan 18, 2014

herokee branch

I love this typo. It's like saying Heroku through your teeth.

@Fandekasp are you using a Heroku buildpack to deploy? If so, which one? I'm not actively developing meteor applications but I maintain the node buildpack at Heroku. Maybe I can help.

@Fandekasp

lol sorry for the typo :)
I'm using the default Node.js buildpack at Heroku. So you're saying you can check for sass files and run compass compile from the buildpack, removing the need for a custom meteor-compass package ? That would be great :)
Thank you very much for your work on the buildpack !

@Fandekasp

@zeke after verification, I actually created the app with heroku-buildpack-meteorite

$ heroku create --stack cedar --buildpack https://github.com/oortcloud/heroku-buildpack-meteorite.git
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment