Documentation is misleading

[kenmazaika]

The documentation is a bit misleading, particularly for beginners. Instructing people to run this command if the file exists:

$ rm app/assets/stylesheets/application.css

Will delete the existence of that file, along with what it is doing:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

Really what you want to do is rename the file app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss in order to access the full power of SASS, while maintaining the way the asset pipeline compiles assets, rather than eliminating everything entirely.

[thomas-mcdonald]

ya that should probably be an mv and before the import block

[glebm]

It is better to avoid using Sprockets require in Sass, why not use Sass @import? require doesn't import Sass it simply concatenates files. The default contains //= require_tree . which interferes with Sass @import and results in files being included multiple times.

[thomas-mcdonald]

^ actually yes. If you're going Sass you should probably go full Sass and not use manifests.

If you're using external gems that only distribute .css, I presume you can put Sprocket manifests at the top of application.css.scss?

[minordv8]

With regard to this documentation. How would one now add additional CSS files like font-awesome-sass or in my case I have a my-site.css.scss that I want to load after all other CSS files?

[glebm]

@minordv8 Just @import it, e.g @import "my-site"

[cvrebert]

@twbs/sass So, where are we at on this?

[glebm]

Documentation is not misleading, should've closed this a few months ago.

[kenmazaika]

Hey, @glebm, I get asked multiple times per week by beginners about why their application lost all their CSS styles after running the following command:

Could we change this to be a:

mv

instead of a:

rm

Or, if that isn't a viable option something that actually explains what to do? It's not misleading for someone who has years of rails experience, but if you're just picking it up the notes are super confusing.

[glebm]

I see. Perhaps instead we should just say mv, and then "remove all the //= require statements from the file, only use @import in Sass from now". But previously this lead to beginners opening hard to diagnose tickets where they would not remove require_tree . and all hell would break loose. Always open to suggestions / PRs.

[kenmazaika]

Thanks for fixing this, @glebm. You rock! :) 👍

[x-yuri]

I believe I've come up with a better solution, then what the documentation suggests. Particularly, because in my case every stylesheet is served in separate request in development and therefore only those stylesheets that has changed get recompiled. That must be what @tombh suggested.

Actually, this particular part of the docs was confusing to me. It seemed like bootstrap-sass's developers considered it bad the way sprockets handles things by default.

[kirichkov]

👍 for @x-yuri's solution