So unless I can not Google properly I can't find a definitive 'best practice' way to use Vendor styling in Rails 7.
It's the same with everything but say I am including Froala Editor and I include the JS through ImportMap and everything is great.
The way that I have found to include the styling for it though is to download the CSS and put it in a /vendor folder in my stylesheets directory and then include it.
Surely I am missing something simple...
Here is how I am adding css files
Create a vendor/stylesheets folder
Modify config/initializers/assets.rb and add
Rails.application.config.assets.paths << Rails.root.join("vendor", "stylesheets")
Then
Download css files into vendor/stylesheets folder (you may need to create the stylesheets folder)
Add to app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", "cssfile.min", "data-turbo-track": "reload" %>
Related
I just inherited a CSS/SCSS project that doesn't use any CSS reset or normalize.
My project structure is something like this:
- config/
- utils/
- blog/
- style.scss (imports everything)
Basically I want to add a reset.scss files somewhere and create new pages by using that reset.
My problem is how can I add a reset to my CSS without interfering with the older .scss files?
Thanks!
You can do it only by IF statement somewhere in <head> and <link> on server side or create two different index.html (for example) files with own <link>s to stylesheets. Solve this problem only by CSS is impossible, you can't use global styles like normalize.scss for local needs.
So,
I have used bower to install bootstrap SASS files into my application.
I am using AngularJS and want to use my own directory structure instead of the default Content path defined by MVC.
So I have installed https://github.com/twbs/bootstrap-sass and in my core SASS file I have imported the bootstrap SASS like this:
#import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
everything loads in my application and the site is definitely using bootstrap, but whenever I try to use a glyphicon I just get a square instead of the icon. Looking in the console I can see that the path to the glyphicons is wrong. It is showing:
http://localhost:58859/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
but it should be
http://localhost:58859/assets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
Now I "could" edit the variables file and change this line:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
to something like this:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: "/assets/bootstrap-sass/assets/fonts";
but whenever someone loads my project from github and bower resolves bootstrap my changes to that file will be lost. I have noted in their documentation they talk about sprockets and mincer, but I have never used these so I have no idea what they are for.
My question is, can I change the font path without editing the SASS file directly?
I'm using spree 2.1.5, rails 4.0.2, sass-rails 4.0.0.
The spree documentation at http://guides.spreecommerce.com/developer/asset.html indicates using the vendor/assets/stylesheets folder. However, examples I see of spree stylesheet overrides on Github and from other google search show many people using the app/assets/stylesheets folder.
Is it best to override spree styles in the folder my_store/app/assets/stylesheets? Or my_store/vendor/assets/stylesheets?
I put my css in the "normal" place - in app/assets/stylesheets, and nothing changed. I put my css in the vendor/assets/stylesheets folder, and they were applied.
Working with Spree very un-like working with "Rails" - though spree is running on a rails server. The process starts with, "Where are the files?" and gets more bizarre from there. This is why I am abandoning it for a custom solution. In many cases, it would take longer to learn how to modify/customize Spree, than to write a new solution (for the parts of it we actually need) from scratch.
Update:
Unlike stated in my original answer, Spree will not even evaluate stuff in app/assets/stylesheets and style customizations need to be made in vendor/assets/stylesheets, e.g. in
vendor/assets/stylesheets/spree/frontend/all.css
TlmaK0 is perfectly right pointing this out.
Quoting from http://guides.rubyonrails.org/asset_pipeline.html:
Pipeline assets can be placed inside an application in one of three
locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared
across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Short: You probably want to put your override stuff into app/assets/stylesheets.
Normally all the code for font-end and back-end for spree loads into to your rvm as other gems, you can override them by creating decorators folder into app(same as like models, controllers). Or you can put the file at the same location(but this is not right solution) and can make the change like mainapp/app/views/spree/admin/shared/_header.html.erb
For decorators example say I want to override spree's products_controller I will put it at decorators/products_controller_decorator.rb
Spree::ProductsController.class_eval do
#mychanges
end
Export all views to app/views with:
rails generate spree:frontend:copy_views
This will generate all frontend views in app/views to override it.
Edit app/views/spree/shared/_head.html.erb and add:
<%= stylesheet_link_tag 'application', media: 'screen' %>
to include app/assets/stylesheets folder.
Firstly,I'm a newbie to rails.I'm working on a rails website. It has three controllers namely
application_controller,static_pages_controllers and users_controller. They all have their respective css (scss) files in app/assets/stylesheets/ (application.css and users.css.scss)
except static_pages_controllers and also has a custom.css.scss for overall layout or common elements.I used controller specific stylesheets as mentioned
here
My questions are:
1) does the css rules in custom.css apply to all the controllers views except for those I have defined explicitly in seperate controller css?
2) if yes,then I have a rule defined in both custom.css.scss and users.css.scss
custom.css.scss - body { background-color:color1;}
users.css.scss - body { background-color:color2;}
but still views in both static_pages_controllers and users_controllers show background color2. where am I going wrong? only views in users_controller must show color2 and static_pages_controller must show color1.
The Rails guide on how to use the asset pipeline doesn't quite tell the whole truth here. It says:
You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.
Now, you could do as they suggest and load specific stylesheets for each controller, but it does not work as they suggest out of the box. The neglect to mention a few things you must do.
You need to remove the //= require_tree . directive from application.css, which, left in place, will load every other asset in the folder. This means that every page would load users.css, and if you added the controller-specific stylesheet line as in their example, it would load the controller stylesheet twice.
You would need to tell Rails to precompile the individual files. By default, all *.css files besides application.css are ignored by the precompiler. To fix this you'd have to do edit your config to do something like this:
# in environments/production.rb
# either render all individual css files:
config.assets.precompile << "*.css"
# or include them individually
config.assets.precompile += %w( users.css static_pages.css )
Finally, as instructed by the Rails guide, you'd need to change your stylesheet includes to look something like:
<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>
<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>
However, the above may not be truly the best practice. Sure, sometimes you might want individual stylesheets, but most the time you probably just want to serve your style bundle so the client can cache one file. This is how the asset pipeline works out of the box, after all.
Besides that, if you were to just add override rules in your controller specific stylesheets, then you're creating a load-order-specific tangle of styles right out of the gate. This... is probably not good.
A better approach might be to namespace the styles in the controller sheets, something like this:
// in application.css (or some other commonly loaded file)
background-color: $color1;
// in users.css.scss
body.controller-users {
background-color: $color2;
}
// and so on...
Then in your layout, add the controller name to the body class, like:
<body class="controller-<%= params[:controller] %>">
In this way, your styles are resolved by namespace, not just load order. Furthermore with this solution you could still go ahead and load separate controller-specific stylesheets if you desire, or you could forget about that and just let everything be compiled into application.css as it would be by default. All the styles would be loaded for each page, but only the controller-specific styles would apply.
In Rails 4.x
you have to add these lines in config/environment.rb
config.assets.precompile << "*.css"
I am building a Rails 3.2 app which has some functionality where a user can apply different themes (i.e. CSS files) to their websites. I have a Theme model with a theme name and a file name - pretty straightforward.
My question is, where should these css files sit? Should they be in the /assets folder, or in the /public folder? They can't be added to the pipeline as far as I know as I don't know which css file the user will choose so can't precompile.
If I use something like:
stylesheet_link_tag "plain.css"
It of course generates a path to /assets/plain.css which is not a valid path.
I can put it in /public and generate the path using something like
"public/themes/" + theme.file
But something about that feels wrong. Any architecture suggestions?
If all themes are simple pre–existing stylesheets of which the user picks one, I’d go with
/app/assets/stylesheets/themes/plain.css
Then use this in the view:
stylesheet_link_tag "themes/plain"
# or e.g. using the model
stylesheet_link_tag "themes/#{current_user.theme.file_name}“
You could also consider creating a theme_stylesheet_tag helper which does this for you in a more cleanly way.