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.
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 created a .js and .css file from a project and added them to a github release
https://github.com/natearn/react-vim-tips/releases
I then attempted to add the code directly to a webpage using an external script and stylesheet (linking directly to the files in the release).
<script type="text/javascript" src="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.css">
For context, the script creates a global function which renders a react component, which I execute elsewhere on the page.
The network requests for the files succeed after a redirect (so 302 then 200), the javascript loads and runs, but the css rules do not get added to the page.
When I copy the stylesheet and fetch it locally, it works. So I believe the problem is in the mechanism of delivery from the CDN.
Can someone tell me what might be happening here, and how I can fix it?
Remember that GitHub repos are different from web hosting services. You are correct that the issue is related to how the .css file is being served (or rather, in your case, not being served at all). There are a few options:
1) Create a gh-pages branch and reference your stylesheet from there i.e. https://natearn.github.io/react-vim-tips/stylesheets/VimTips.css. This should actually serve your CSS properly.
2) Use RawGit to generate a proper CDN link to your VimTips.css file. I gave this a shot and have a working example at this Stackblitz: https://stackblitz.com/edit/react-bcjjdo?file=index.js. Here's the CDN link I used: https://cdn.rawgit.com/natearn/react-vim-tips/32b5ee66/stylesheets/VimTips.css
The crucial point is that either of these strategies will serve your CSS with the correct Content-Type headers, enabling them to actually load as CSS in your page. Referencing the link to downloads from your release simply prompts a download of the binary data for your CSS file, which will not work. Hope this helps you out!
Use the raw version of the file from your repo,
I have this css file from an old Hello World repo,
using https://github.com/mcarpenterjr/Hello_World/blob/master/style.css you get the file in the repository.
Using https://raw.githubusercontent.com/mcarpenterjr/Hello_World/master/style.css
you get the raw file, which is what you're looking for. To get this simply click the raw button to the upper right of the file contents on a file's page from the repo.
I suppose you could also swap https://github.com for https://raw.githubusercontent.com and drop blob from the address.
Just use this -> https://rawgit.com/
Works flawlessly.
Currently in my Grails app, I have all my CSS/JSS inside web-app/css and web-app/js respectively, and I refer to them in my GSPs like so:
<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="myapp.css" />">
<script src="<g:resource dir="js" file="myapp.js" />"></script>
I am trying to convert these over to use asset-pipeline.
So I added compile ":asset-pipeline:1.8.11" to my BuildConfig#plugins section, and then moved my CSS/JS files into their appropriate places in grails-app/assets. I leave the <g:resource> tags in place. When the server starts, my app is styled completely wrong, and it is obvious that Grails can't find my CSS/JS files in their new location.
What do I need to do to make this conversion complete & correct?
You can use the asset pipeline taglibs:
<asset:stylesheet src="myapp.css" />
<asset:javascript src="myapp.js" />
This will look in the grails-app/assets/stylesheets and javascripts to find your resource files.
If you would still rather grab the relative path, you need to use the asset pipeline methods to do so.
The Asset Pipeline can change the path when deployed:
For example, in the Development environment, none of the resources are minified and combined and the path is something like YOUR_APP/assets/myapp.js .
In the production environment the path would change to just YOUR_APP/assets/SOME_HASH_OF_YOUR_MINIFIED_ASSET
So to get Asset Pipeline to tell you the path use:
${asset.assetPath(src: 'myapp.js')}
${asset.assetPath(src: 'myapp.css')}
Letting Asset Pipeline compute the path allows greater flexibility when deploying. For example, if you host an application in the cloud, you could specify a specific CDN (like CloudFront from AWS) to serve your static assets with a simple config change in Config.groovy.
I'm developing an ASP.NET MVC application using dotless and bundling.
When my CSS is optimised I get a link such as:
<link href="/bundles/global.css?v=xxxxx" rel="stylesheet"/>
However, when optimisation is disabled I get:
<link href="/css/header.less" rel="stylesheet"/>
<link href="/css/content.less" rel="stylesheet"/>
<link href="/css/footer.less" rel="stylesheet"/>
In Chrome these less files are read just fine.
However, is it common practice to use .less files directly as stylesheets?
I'm concerned that some browsers might not recognise the stylesheets as they don't end in .css and therefore will ignore them.
UPDATE: For clarification, the .less files are pre-compiled server side and therefore are valid CSS files. No client-side processing is happening.
I'm pretty sure as long as the user has Javascript enabled then the only thing that will process and interpret the .less files into CSS is the less.js library. You could also check their Browser Support.
I also wouldn't suggest using LESS in production as it's whole purpose is to help you create dynamic stylesheets even faster than normal in development. If you leave it in production then each time the browser loads the page it will have to download the less files and render them which is more time consuming than simply compiling your files into one .css file.
Edit:
You could ensure that the browser doesn't reject your file and treats your less file as a css file by setting the MIME type on your server to text/css for files with the .less extension.
For example if you're using Apache you could use the following .htaccess file to do so.
AddType text/css .less
When I put my website in production using git push heroku master the url in my CSS does not refer to the right image url.
Here is my situation in development environment :
app/assets/images/logo.png is present
app/views/layouts/application.html.erb : <%= stylesheet_link_tag "style" %>
app/assets/stylesheets/style.css : background: asset-url("logo.png");
Here is my situation in production (when I "View Page source") :
I don't know how to find logo.png ?
Link to my CSS : <link href="/assets/style-75a5c3912777c4b39ba92d1893ac7815.css" media="screen" rel="stylesheet" />
In my (compressed) CSS I can find : background:asset-url("logo.png");
For the others images called directly from app/views/* it's ok (<%= link_to image_tag("xxx.png") %>)
In config/environments/production.rb I have :
config.assets.precompile += ['style.css']
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.digest = true
config.assets.compile = true
config.serve_static_assets = true
I'm following this great tutorial.
SCSS
The problem, from what I can see, is that you're not using any CSS preprocessors (SCSS / SASS), cancelling out the ability for the Rails helper asset-url.
I'd do this to start with:
#app/assets/stylesheets/style.css.scss
background: asset-url("logo.png");
Asset Pipeline
This will make sense if you look at how the asset pipeline works
Basically, the asset pipeline is a place to put all your css / image / javascript files, which your application can call, either statically or dynamically. Whilst in development, the asset_pipeline works very well to provide you with a central location for all your files -- all being called dynamically.
--
Production
The "problems" happen when most people want to use the asset pipeline in production. Production generally requires static assets, which means precompilation:
In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.
Asset precompilation is when Rails will "compile" your CSS / Image / Javascript files into a series of "minified" versions - making them much more efficient to load
The problem with the precompilation process is actually loses all the "dynamic" aspects of the files, meaning if you want to include things like asset-url, you'll need to use a preprocessor to manage the dynamic aspects of these files.
I resolve my problem thanks to multiple answers found here and somewhere else (can't found where anymore sorry). Here is my solution to make things work without putting all my ressources into the public folder.
I deleted all ressources from public/images & stylesheets & javascript
I renamed my style.css to style.css.scss.erb
I replace every background: url("../images/xxx.png"); to background: url(<%=asset_path "xxx.png"%>); from my CSS
I executed this command before pushing into production : bundle exec rake assets:precompile RAILS_ENV=production
Thanks #RichPeck for your post which helps me to understand the process of assets pipelines