i'm new in Rails and in Rails 4 i have generated a controller Pages.
The generator process have created a
app/stylesheets/pages.css.scss
Inside this scss file i've inserted:
.center { text-align: center;}
When i launch the web app, in the html source code i found
<link href="/assets/pages.css?body=1" media="screen" rel="stylesheet">
but this css is empty and not applies style.
Anyone can help me?
Thanks
Everything looks good in your code. Maybe you precompiled your assets? How did you run your server?
Try doing rake assets:clean before rails server to clean any precompiled assets that may exist.
Related
I am building a Symfony 5 app and want to use CSS inside my twig templates. My stylesheet is at public/css/styles.css and so I try to use it in my twig template with the line <link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css"/>. This works locally but once I deploy it to the Google Cloud Platform the server can no longer find it. The console shows a 404 error when trying to find the stylesheet. Where does Symfony want me to put my css files?
This feels like it should be very simple but I'm totally at a loss and feel like I'm missing something stupid. The documentation only really talks about Encore and that seems like such overkill for using a single CSS file in a twig template.
(sorry i cant comment because low reputations, thatswhy i need to take an answer)
At first, the location of your css is correct. Also the usage of your link tag looks fine. Now the question is: what is the correct error message, or better where looks the browser to your file?
I think the browser want to take your file from root, not from public folder. If you can answer this with yes, you have to check your .htaccess file and/or linking from webspace to startfolder (public) in this cause.
It works in localhost because the symfony dev-server take this work for you.
Got the CSS working. I think what did it was telling app.yaml to put the css in the public folder.
handlers:
- url: /css
static_dir: public/css
Then instead of loading using the asset() function, I included the css with:
<link href="/css/styles.css" rel="stylesheet" type="text/css"/>
That way, the css folder I had in public locally was put in public when deployed to the GCP.
I'm starting to develop an web app in Angular using the Angular Material library for the interface. But I'm getting an error when trying to import a prebuilt theme. In order to import it, I added <link rel="stylesheet" href="../node_modules/#angular/material/prebuilt-themes/indigo-pink.css"> to my index.html file but when i run ng serve I cannot get the file.
If you are using angular-cli follow their steps for including Angular-Material.
Ensure you have the below imports in src/styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import '~https://fonts.googleapis.com/icon?family=Material+Icons';
It's slightly different to what angular-material suggest on their own Getting Started site but it worked for me.
Check that your path is correct. I had the same problem and I fixed the path:
Mine is
<link rel="stylesheet" href="lib/#angular/material/core/theming/prebuilt/indigo-pink.css">
If you don't find any solution just add angular material again. It won't affect your code but add the CSS. Don't forget to re-start the angular server.
ng add #angular/material
i'm working on a bootstrap template locally on my dev server.. the template loads some resources via CDN..
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--font-awesome-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
Problem is this slows me down because everytime I hit refresh to check the changes on my page (localhost) the darn thing has to load the resources online again and again..
So i tried to open the resources via the link and save em locally. but this breaks because i guess there are more things to it than just the CSS code.
Is there an easy way to "localize" these things?
Thanks guys
This are the steps I followed to use CDN CSS resource locally:
Download and extract the font pack from here
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the fonts path within your project.
Include a reference to the ionicons.css file from every webpage you need to use it.
In my case I include this in main.html
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
then simply add the icon and icon's classname to an HTML element.
<i class="icon ion-home"></i>
and folders are in this way:
- project_name
* css --> ionicons.css
* fonts --> ionicons.eot, ionicons.svg, ionicons.ttf, ionicons.woff
To preface this answer, I'm not sure that this solution is considered 'easy' but it will get you the ability to host locally vs. being dependent on the CDNs. The easy solution is using the CDNs. That being said:
The bootstrap.min.css file is easy to localize, you can go to getbootstrap.com and get it out of the Download Bootstrap option.
Localizing Font Awesome is a bit more work. Here you need to copy the entire font-awesome directory into your project. You can download it from this URL: http://fortawesome.github.io/Font-Awesome/ . You'll end up with a directory folder named something like font-awesome-4.2.0, which will contain a series of sub-folders: css, fonts, less and scss. You'll also need to call the local font-awesome.min.css file in the head section of your HTML. See the following GitHub link for more information on setting up Font Awesome locally: http://fortawesome.github.io/Font-Awesome/get-started/
Ionicons is similar to Font Awesome setup. From the following Ionicons web page, you'll need to Download the directory and include it in your project: http://ionicons.com/ . You'll need to call the local ionicons.min.css file in the head section of your HTML after you have the directory setup.
old question, but I think there's an easy solution now:
you can install the node package by using npm install ionicons
https://www.npmjs.com/package/ionicons
Save the css/js files locally from url and change path.
eg:- css/ionicons.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
I have a rails app I put my index.html in public folder and it shows when i go to port 3000 but it doesn't show it with css, I have my css folder and i tried putting it into assets stylesheets but nothing is happing? where do i put my folder with all the css files in it? would i need to change the way my index.html referances my css files?
for now my index.html in public folder references the css files like this <link href="css/styles.css" rel="stylesheet">
i've looked into some tutorials but their a bit complex in understanding
Things put in the public folder won't be processed by the asset pipeline. This isn't the "rails way" at all, but you can just move your .css to your public folder and call it like you're calling it now.
To gain access to the asset pipeline the quickest way I can think of is to just scaffold generate something, fill in the view with your HTML and then you can call via asset pipeline. However by default the root route isn't set so you'll have to navigate to localhost:3000/whatever-controller-you-generated-here
I highly recommend reading this guide before you go much further http://guides.rubyonrails.org/
First of all if you are using rails then why are you using static page like this. If you really want to use this then you have to specify stylesheet like this
<link href="/assets/application.css" rel="stylesheet" />
I am developing an application with Ruby on Rails, and I'm using bootstrap to upgrade my CSS.
My question is:
If I have the next URL link: link href="css/bootstrap.css" rel="stylesheet"
How can I redefine the URL to be a relative one, thus it will not break if I rearrange my
project's files?
I think that the best practice is to put the stylesheets in the following directory:
app/assets/stylesheets
And include it using:
stylesheet_link_tag 'name'
But if you are using Bootstrap I highly recommend to use a Gem (For example http://rubygems.org/gems/twitter-bootstrap-rails), that way it will handle automatically the stylesheets and javascripts of the framework.
Use rails assets pipeline. See this guide:
http://guides.rubyonrails.org/asset_pipeline.html