Hi I got a strange problem.
When I clicked three pages shown in the following three images
Step 1
controller welcome
Step 2
other controllers
Step 3, go back to the step1 view
controller welcome
The last image,
when I back to controller welcome from the other controllers
,that is step 2 to step 3.
The stylesheets were cached by the browser,
The step 3's layout is differ to step1 layout.
But they are the same page,How could it be, it seems the browser caches the css files ?
I add two assets folder used by the two layouts, in application.rb
config.assets.paths << "#{Rails.root}/vendor/themes"
themes
├── ace-admin-theme
│ ├── avatars
│ ├── css
│ ├── font
│ ├── images
│ ├── img
│ └── js
└── lenord-single-page-theme
├── css
├── fonts
├── img
├── index.html
├── js
└── rs-assets
Added the welcome.html.haml under layouts folder, so that welcome_controller can load this layout
layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml
All the source code I put here https://gist.github.com/poc7667/0198b973fce0fbf4dd26
Page A : OK
Page B : OK
Page A : Failed, the Page B's stylesheets are cached, it should be identical to original page A
It didn't work when I comment the data-turbolinks-track for the css
The strange phenomenon still occurs.
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
/ Description, Keywords and Author
/ basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
I open the firebug to see the included css files,
I found I need to reload the page to load the expected css files.
How to fix it ?
Update
When I reload page, the console showed those css files were loaded
Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
When I click a hyperlink(by url helper) to other pages the css won't be load again.
But actually it should load the css files again, because some controllers use the different layout and assets.
But what's the worse is that if I click the link (generated by URLhelper) the problems happens
But if I go to the page by typing the URL on the browser manually, it works fine!!
To brief, the css files only load in the first time, and other necessary css files(for other layout) won't be load anymore.(If I view the page by clicking the URLHelperLink), but it works by manually type the URL on the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands)
How could it be, it seems the browser caches the css files ?
Turbolinks
That might appear to be the case if you're using Turbolinks - which loads a new version of the <body> tag (leaving <head>). This would make your browser use the same CSS each request (where turbolinks is firing) problem would only be present if you're using the same layout
This may not be the problem (if you're changing layouts, the entire page will refresh)
A way to test this is to turn off turbolinks:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>
If you do this, Rails should refresh your whole page every time. This will allow you to see whether the styling will change each time
CSS
The other issue you may have is how you're calling your CSS. If you've got a different layout for step 3 - are you calling different CSS?
Personally, I would just use different styling for the different steps & incorporate them into the same spreadsheet.
Here's how I'd do it with SASS:
#app/assets/stylesheets/application.css.sass
.service
.step1
//styling
.step2
//styling
.step3
//styling
Update
I would say the issue here is likely to be your structure of your code with Turbolinks. I'm 90% sure the issue will be with Turbolinks (especially as you wrote you "need to refresh" the doc to make the CSS work)
Can you share your layouts & how you're calling them in your controllers?
Related
I tried accessing CSS from the parent folder in order for it to be the only CSS file. I get an error when trying to access it.
GET http://localhost:3000/style.css net::ERR_ABORTED 404 (Not Found)
app.Static("/", "static/home")
# static/home has index.html
app.Static("/signup", "static/signup", #options)
# static/signup has signup.html
My CSS works fine when I put it in a folder selected by app.Static. However I want just 1 CSS file that all of my html files can access. Therefore I would like it in the static folder but for some reason my HTML files can't access it.
<link rel="stylesheet" href="../style.css">
# Both files have this link tag
I'm guessing the issue is that I am approaching the problem wrong and app.Static can't see outside of the folder it selects?
The link’s href attribute should be an absolute path:
<link rel="stylesheet" href="/style.css" />
Since the HTML files loaded in the browser will have a path starting with /signup, the relative resource path ../style.css might not always be a reference to /style.css.
What you are trying to do is possible.
Assuming this structure:
├── main.go
└── static
├── home
│ └── index.html
└── style.css
You just need to set ./static as root folder.
app.Static("/", "static")
Then into ./static/home/index.html use:
<link rel="stylesheet" href="../style.css" />
Doing that, you can go to http://localhost:3000/home
and see the content of ./static/home/index.html using ./static/style.css.
My understanding of how a web server is meant to be was wrong. I thought every single file was meant to be served form app.Static but that only really works for a single page application.
It's best to keep your CSS/JS in there so you can easily call it like style.css from your HTML files being served on your standard routes.
I have a vue- project with the following src directory tree
├── assets
| └── moderator
| └── css /* css styling for pages and components for moderators, e.g. everything is coloured blue*/
| └── user
| └── css /* css styling for pages and components for users, e.g. everything is coloured orage*/
├── components
| └── moderator /* here are the .vue components for moderators' views */
| └── user /* here are the .vue components for users' views*/
├── main.js
├── router.js
└── vue.config.js
The app will have two types of users :
Moderators
Users
Each type must have its own styling, components for users must use css-styles from assets/user/css, while moderators' from assets/user/css.
If I use scoped import, styling doesn't propagate on external components like those of Bootstrap.
So my questions:
How to set different styling for respective components so that moderator will have everything in blue, and user - in orange?
Is it possible to set style programmatically depending on routes, defined in router?
When you use Style in VueJS the css will render through all components. To use style only in the current component you need to uae scoped. This far you have done right, BUT! Bootstrap and other libraries mostly use components to represent their features so scoped will not work... But there is still a way! You can use >>> before the css you want to work in child-components. >>>b-corousel {color=red;}
I was trying to segregate my CSS to specific controllers by compiling my assets and rendering them in my layouts via <%= stylesheet_link_tag "application", params[:controller] %>
I am using the Bootstrap (4.3.1) CDN and have this in my application.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
The problem is that when I do Rails.application.config.assets.precompile += %w( *.css ) it must be compiling bootstrap as it gives me this error:
Sass::SyntaxError in RecipeCategories#index
Undefined variable: "$alert-padding".
So I'm using this to "solve" it:
Rails.application.config.assets.precompile = [ Proc.new{ |path| !File.extname(path).in?('.css') }, /bootstrap.css$/ ]
I don't know if this is effective or best practice to prevent bootstrap from being precompiled.
I also run into the problem where a style defined in one controller's stylesheet is being loaded in the view of another until the page is refreshed. (I put the class on an element in multiple controller views to see if it was really isolated to a specific controller.)
Basically, the style in one controller's CSS file is able to be used in other controllers views until the page is refreshed, then the style is "removed" from the element in the controller view that doesn't have the style in it's CSS file.
You seem to mistakenly be precompiling the bootstrap assets via the gem and Rails' asset pipeline AND getting bootstrap from a CDN. You only need one or the other, so you can probably remove the gem and just use the CDN.
I'm trying to use these icons for my site. I already downloaded bootstrap, and have a bootstrap.css file. If I download all of bootstrap, it messes my site up, so I downloaded a customized version. I forgot to download the icons, so what I did was download a customized bootstrap with only the icons, and then copy and pasted that into my old bootstrap.css file. However, the icon I was trying to use didn't work.
So then what I did was I tried moving my old bootstrap.css file out of vendor/assets/stylesheets and into vendor/assets, and I put the new bootstrap.css file (with only the icons styling) into vendor/assets/stylesheets. When I did that, the icon still didn't show. So I removed the new bootstrap.css file, and I put the old one back into vender/assets/stylesheets. However... now none of the bootstrap styling works!!! I have no clue why that is!
I tried restarting my web server, clearing my cache, I checked to see if there is an assets folder in my public folder (because when there is I can't see css changes using localhost. something to do with compiling). None of it worked, and I still can't see any of the bootstrap styling in my localhost. When I use inspect element, I don't see the bootstrap styles being applied. I'm afraid to update the actual site, because I might loose the bootstrap styling. If you want me to update it so you can see it and help me and are confident that I won't lose the bootstrap styling, I'll trust you and do it. Let me know.
Error:
Sass::SyntaxError in Static_pages#home
Showing /Users/adamzerner/collegeanswerz/app/views/static_pages/home.html.erb where line #1 raised:
Invalid CSS after "...ground-position": expected ";", was ": center;"
(in /Users/adamzerner/collegeanswerz/app/assets/stylesheets/home.css.scss)
Extracted source (around line #1):
1: <%= stylesheet_link_tag "home", :media => "all" %>
2: <%= javascript_include_tag :application %>
3: <% provide(:title, 'Questions About College? CollegeANSWERZ') %>
4:
Rails.root: /Users/adamzerner/collegeanswerz
Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/bootstrap.css:1939
app/assets/stylesheets/home.css.scss:1
app/views/static_pages/home.html.erb:1:in `_app_views_static_pages_home_html_erb__737002310770935096_70160250580000'
Request
Parameters:
None
Show session dump
Show env dump
Response
Headers:
None
If you are using ruby on rails, then you can use the bootstrap-sass gem.
gem 'bootstrap-sass'
and then start using it by adding
#import bootstrap;
to the css file under app/assets/stylesheets. You can have all the functions provided by bootstrap.
But if you still want the customized version, you can place the bootstrap css files under app/assets/stylesheets and javascript files under app/assets/javascripts and images under app/assets/images. You can download the missing images from bootstrap and then go to /img for the images.
EDIT:
Looking at your error logs and the css you have provided in the comment. You have forgotten the semicolon after the background-image: url("glyphicons-halflings.png");
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"