In my app I have the follow line
<%= stylesheet_link_tag "global.css", "pop_div.css", "log_in.css.erb" %>
log_in.css.erb is a simple css with one of the lines have a
background: url(<%= asset_path 'LightBg.png' %>);
and after looking at the source it turned into
background: url(/assets/LightBg.png);
which I guess is correct, since the website works.
My confusion is:
1- why does it give a url for /assets/lightbg.png while in the public/asset directory the file is actually called LightBg-47c90e283c305c002f6973edf4054002.png
2- Why in the source of the page I see
< link href="/assets/log_in.css.erb?body=1" media="screen" rel="stylesheet" type="text/css" />
and not log_in-447fd7902dbf635bf4231025699ce36a.css which is the name of the file in public/assets.
Shouldn't the compilation process turn the call of log_in.css.erb to log_in.css?
Thanks
The hashing is only enabled for production, in development you still get the plain file names. If you require other stylesheets and javascripts than application.js and application.css, you need to set the config.assets.precompile in config/environments/production.rb. And I'm not sure, if you still can pass several stylesheets to stylesheet_link_tag. But usually you want all javascripts and stylesheets compiled into a single file (application.js and application.css).
Related
I wanna hide that i use The Blazor.
so, I should modify name of bundled css and js files.
How to do this?
According to this article, CSS isolation occurs at build time. During this process, Blazor rewrites CSS selectors to match markup rendered by the component. These rewritten CSS styles are bundled and produced as a static asset at {PROJECT NAME}.styles.css, where the placeholder {PROJECT NAME} is the referenced package or product name.
That means we could only disable the bundle not modify it during develop environment.
But after publish, it will generate the file like this:
You could modify the {PROJECT NAME}.styles.css to {other}.styles.css and modify the index.html css name as below:
<link href="{other}.styles.css" rel="stylesheet" />
I've a custom theme under app/theme/AcmeTheme. I have the theme working and I can define my own templates under views or override template for other Bundles. The problem is that I can not figure out how to add a custom CSS file inside my theme.
So fat I've tried:
AcmeTheme/public/style.css
AcmeTheme/web/style.css
But after running assets:install and sylius:theme:assets:install the file is not copied. I have read the documentation multiple times and I can still not get it to work.
Place your style.css in app/themes/AcmeTheme/SyliusShopBundle/public/ and run sylius:theme:assets:install. Now your style.css should be available in web/bundles/_themes/AcmeTheme/template/syliusshop/ and you can include it in the html.twig with <link rel="stylesheet" href="{{ asset('bundles/syliusshop/styles.css') }}">
Solution with assets in app/themes/AcmeTheme/web/assets/ doesn't work for me. Only way to add custom assets is via app/themes/AcmeTheme/SyliusShopBundle/public/ which is pretty odd.
I have an Octopress blog with an installed Octostrap3 theme. Everything works fine so far.
But I've been looking for the last days and I'm not able to find the responsible css files in Octostrap3 to change the colors for my Octopress blog.
Could anybody tell me which css (or scss) files I need to edit?
Ok, i've found a solution that works for me.
tomordonez' hint didn't help in my case (but thank you anyway), because there was just an screen.css in /source/stylesheets, no style.css.
If you have octostrap3 installed, you can use any bootstrap theme. To change the theme, you just have to edit the /source/_includes/custom/head.html and insert the path to the css file for your theme.
I placed my theme-css-file in /source/assets/deg0nz/, so i changed the head.html to:
<link href="{{ root_url }}/assets/deg0nz/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
I have chosen a theme from bootswatch and customized it with their customization procedure. So in the end i just had to change the bootswatch.less, the variables.less and the bootstrap.css in the bootswatch-theme folder and create the min-files.
Instead of doing this you can use any bootstrap.css and place it's path in /source/_includes/custom/head.html like i described above.
Try source/stylesheets/style.css
I would like to include PIE.htc in my Rails application to make CSS3 easier for IE. I can't seem to figure out how to include the PIE.htc file.
I tried to include PIE.htc in my assets folder as well as assets/stylesheets folder, but I no routes matching error.
How do I include PIE.htc with rails asset pipeline?
Try the solution in this post: Using PIE.htc in rails
Basically, it should be:
behavior: url(/assets/PIE.htc);
Also, if you want to be completely sure that the PIE.htc file is being loaded, open it and add an alert as so:
<script type="text/javascript">
alert("PIE works);
If the file if being loaded, a popup should appear showing the message.
I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.