Ember-cli scss - how do I get this working?

Ember CLI
1

How do I get scss to work in a cli app?

I have ran the following:

sudo npm install --save-dev broccoli-sass

and have scss files in my styles folder but my-app.css is still empty?

2

That looks correct.

  • Are there are styles in app/styles/app.scss?
  • Did you stop and restart the ember serve command after installing (you need to)?
  • Are you receiving any errors?
3

There is nothing in app.scss but there are other files in there with content and the scss extension.

There are no errors

4

OK so I need to be using app.scss to start the ball rolling -sorted :slight_smile:

It seems discourse is able to say:

@import "common/base/*";

But my version doesn’t seem to like the * character

5

Only app/styles/app.scss is preprocessed. If you need other resources, you will need to import them.

I do not believe that wildcard imports are part of the SCSS spec/language/whatever (but I could be wrong).

Discourse uses Rails, and Rails adds this “magic” (which is actually kinda not great because filesystem ordering inconsistencies result in completely different CSS output).

1 Like
6

Don’t run sudo with npm if you’re not using the -g flag, you’ve messed up the permissions in your node_modules/ folder doing that (some files are owned by root now).

I recommend using https://github.com/creationix/nvm to install node, then you don’t need sudo for it ever again. Before nvm, I kept running into permission trouble and the system installed node getting in the way. But those troubles are long gone.

7

Great point (can’t believe I missed that in the original post)!