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
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 am working on a project with rails 4.0.0 and foundation-rails 5.0.1 for the last weeks. I found a template on http://www.themplio.com/categories/foundation-free?order%5Bby%5D=purchases&order%5Bdirection%5D=desc that I want to use. But I cant figure out how to separate the files (especially css files) from the template in my rails project files.
Is there a specific way or a tutorial that I can follow to get this working??
Sorry if the answer is too obvious but I am new with rails
Depending on how complex of a template you downloaded, it's going to take some work getting the template (which was built for the vanilla foundation) to work with foundation-rails
You should simply be able to add the stylesheets to your assets and let them be included automatically via <%= stylesheet_link_tag('application') %> and *= require_tree . but if there's more than a few style sheets, and they're in different folders and such you're probably going to be best off taking the HTML and css snippets you like from the template, and then dropping them into your rails app manually to get the best results.
In the folder that you download the two important folders are javascripts & stylesheets. You can manually add these files to you rails app at app/assets/javascripts & app/assets/stylesheets. Files in these folders will be automatically included.
You can then use the html body content in index.html file in the downloaded folder in your rails html.erb views - that will get you started.
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 have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.