I am having issues with Tailwind.
Seems like Tailwind is not compatible with SASSC as it probably uses newer CSS. https://github.com/rails/cssbundling-rails#how-do-i-avoid-sasscsyntaxerror-exceptions-on-existing-projects
Though I really need SASSC for the asset_path helpers in order to resolve custom fonts fingerprinted resources names that Tailwind will use.
I have been thinking of doing :
Keep SASSC and removing tailwind.css file from the Rails 7 pipeline by having CSSbundling exporting it directly in the public folder. Though asset is not fingerprinted then I can't really add a cache policy to the file which is a shame.
Try to remove asset_path from the SASS files and replacing it with .erb files to resolve the name of the fingeprinted asset. But probably won't work as the erb preprocessing should happen before precompilation.. (EDIt: seems to work but need to find out is it is using the current asset path or an older asset path)
Put fonts in public folder and call from there. Fonts are not assets that are designed to be changed for their respective file names. So I guess this is the best solution..
Has anyone found a solution for this ?
EDIt :
Seems like gem sassc-rails is really lagging on the Sass versions https://www.npmjs.com/package/sass as last repo update is 3 years old. Has someone tried to use the sass package with Jsbundling in order to remove the sass processor from asset pipeline ?
We could then remove the stylesheets folder from the app/config/manifest and leave sprockets to compile the Sass processed files from builds ?
Related
I've built my portfolio site off of Github Pages. Now that I'm starting portfolio 2.0, I want to use Sass.
I've used Sass in the past but didn't have to set it up directly. So far I've installed Sass using gem install sass and have my file setup, but am not sure how to compile it properly.
File Structure:
styles.css
scss/
_banner.scss
Styles.css content:
#import 'scss/_banner';
Am I missing the compiling step somewhere? It is even possible to use Sass on Github Pages?
For my solution I replaced scss/_banner.scss with styles.scss, opting to not create partial files for a single page application.
Then all you have to do is run $ sass --watch css/styles.scss:css/styles.css in the terminal and your CSS will be compiled each time you save your Sass file. This command points your computer to which file to compile and to where.
Thanks to #dommmm for directing me to the solution with the youtube video in the question comments.
So I have been using SCSS and Compass on all my projects. Super happy with it. However, just now I got an existing site built by a different team that needs to be updated and uses LESS. (The project also uses .ftl files which is also new to me)
Less syntax seems pretty similar and straight forward so I don't have an issue updating .less files, however how do I get it to "compile" to css so I can see my updates on the browser?
[You] can invoke the compiler from the command-line, as such:
$ lessc styles.less
This will output the compiled CSS to stdout. To save the CSS result to a file of your choice use:
$ lessc styles.less styles.css
To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css option:
$ lessc --clean-css styles.less styles.min.css
source: http://lesscss.org/#using-less-command-line-usage
This is assuming that you have less installed through node. Additionally, the previous developer could have been using a gulp file to compile it, so you will want to look at that as a possibility.
If you just want to quickly convert it without installing any tools: http://less2css.org/
Personally I use http://koala-app.com/ for less, sass, compass and coffeescript. I especially like the auto compile option, just working on less files and the css file will be updated in the same folder at the same time.
I have an external css, javascript and Images files in a separate project and wanted to include in my new rails project. Here is my structure of folders:
external-assets/js/ <Files>
external-assets/js/plugin/<Files>
external-assets/css/<Files>
external-assets/css/plugins/<Files>
external-assets/images/<some Folders>/<Files>
external-assets/images/<Files>
So, I copied external-assets/js folder to app/assets/javascript and for css I copied external-assets/css to app/assets/stylesheets.
and replace <link rel="icon" href="external-assets/css/plugins/bootstrap.min.css"> to <%= stylesheet_link_tag "/plugins/bootstrap.min.css" %> in my html.erb file. I followed the same thing for other css files and js files. When I start the server I got this error:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style.css )` to `config/initializers/assets.rb` and restart your server
After searching on SO post like: Asset filtered out and will not be served: add `config.assets.precompile and
Asset filtered out and will not be served. I need to mention my all js and css files to config.assets.precompile.
Questions
1) Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
2) What about If I put them in public folder? Is it good approach?
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
No.
Sprockets has the require directives which concatenate any files you "require" into your application file...
#app/assets/javascripts/application.js
//= require x
What you want? Probably not... but it at least gives you the ability to call one file (application), whilst benefitting from the content of all the others.
2) What about If I put them in public folder? Is it good approach?
No.
Precompiling assets puts the minified versions into public/assets anyway.
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
image_tag
Assets
I think you're getting confused about the role of "external" assets.
If an asset is truly external (such as Google's JQuery repo), you'll be able to reference them by using the javascript_include_tag or stylesheet_link_tag respectively:
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %>
This will basically add the following to your layout at runtime:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If this is what you want, you'll be best adding the external repos calls to your #app/views/layouts/application file (as above).
-
Rails Assets
However....
They're obviously not "external" assets if you have them stored locally.
So you're either going to have to call them from their real external repositories, or use them locally in your app.
If you're happy using them locally (which carries the responsibility of keeping them updated), you may wish to look at Rails Assets:
This is a gem repository (you have to add source https://rails-assets.org to your Gemfil), which allows bundler to ping their server for asset-based gems.
It is meant to work like Bower - taking any of the public repos and converting them into gems. It allows you to call external repos into your app:
#Gemfile
gem "rails-assets-jquery.easing"
#app/assets/javascripts/application.js
//= require jquery.easing
This will basically store a local version of the JS / CSS you wish to use in your asset pipeline, allowing you to include it with the sprockets require directive.
The big difference is that since these assets are downloaded through the gem system, they will be updated each time you run bundler.
We use it, and although it can be a little tricky sometimes, it's well worth it.
Either put it all into the public directory, and then use the html <script>, <link>, ≤img> tags to reference the assets. You will lose some Sprockets features like minification and digesting, but that's not a big deal.
Mention all the assets in the application.css / application.js, or create a new manifest file, e.g. custom.css / custom.js, list the assets to use here and then add those two files into the:
Rails.application.config.assets.precompile += %w( custom.css custom.js )
Do you have require _ tree in your application.js & application.css?
If not, just add it to both files and restart your server.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.
Check out this guide
Hope it helps. :)
I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.
It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option
I've beens searching around, and I see a ton of different proposed file paths, none of which work for me.
What do I change background-image: url("/../img/glyphicons-halflings.png"); to?
In short, if you use Rails assets pipeline all your assets will be compiled to /assets folder. There is also an option to change the folder name. Please refer to the guide for more details.
If you use scss with sass-rails gem there are helper methods asset-url and image-url that can help you manage with assets path for your CSS.
Lastly there are a couple gems you can use to include bootstrap in your Rails app:
https://github.com/seyhunak/twitter-bootstrap-rails is a less version (Bootstrap is built with less). It requires less-rails gem and https://github.com/thomas-mcdonald/bootstrap-sass