Here's my application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap
*= require bootstrap-responsive
*= require style
For some reason none of my css styles are being applied. When I view source and open application.css, the file is exactly the same. It's not compiling it. The application.js is compiling just fine!
my gemfile: https://gist.github.com/1748054
Any ideas?
EDIT: Fixed it by adding */
Make sure you have:
# Enable the asset pipeline
config.assets.enabled = true
set in your config/application.rb
Also this is a bit of a shot in the dark but don't you need to have a line like this:
*=require_self
before anything else. I always use sass imports to include my stylesheets with more precision. So mine would look like this:
/*
*= require_self
*/
#import "bootstrap.css";
#import "bootstrap-responsive.css";
#import "style.css";
Then just make sure your file is named application.css.scss
Related
I had no luck with the official TBS gem.
Instead, I've installed all of the required .js and .scss files in my vendor directory.
in my applications.css.scss, I have...
#import "bootstrap/scss/bootstrap";
#import "historical-bs-custom";
the other SASS files are also within the /scss directory above.
These are the components I thought would get loaded by the #import statements in the main bootstrap.scss by default. Ex. _alert.scss, _badge.scss, etc.
in my application.js, I have...
//= require rails-ujs
//= require turbolinks
//= require jquery-3.3.1.slim.min
//= require popper.min
//= require bootstrap/bootstrap
//= require_tree .
Seen in source code view of the page, .js loads fine, but my CSS does not at all.
My gemfile specifies that it is using
gem 'sass-rails', '~> 5.0'
I thought this would be enough to preprocess the SASS. I also added the
# Bootsrap sass specific gem
gem 'bootstrap-sass'
but had no luck.
I was hoping to be able to use SASS variables along with custom CSS rules for this application. Most of the documentation on the internets relates to gem usage, which I found I was not the only one having trouble with.
Anyone out there trying to do such a thing without a gem?
Any advice or insight would be greatly appreciated.
Thanks in advance.
I was able to get the SASS to preprocess by amending the code as seen below, using the #import statements outside of the initial default commenting that are in application.css.scss files.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap/scss/bootstrap";
#import "historical-bs-custom";
#import "test";
At first, when using VSCode, I got bad syntax highlighting, so I backed off. A very nice coworker and friend had me try this again. Now I can get on with my life.
I am trying to migrate to Bootstrap 4 in my Ruby on Rails project, following the github installation guide
It recommends that in my application.scss file, I remove *= require_tree
However, when I do this, none of my custom CSS files appear. If require_tree DOES tell the asset pipeline to include all of the specified files in the directory, how else would the asset pipeline know to do this?
I've been trying to find an answer to this problem and haven't found anything.
OK, you would try to work with css and scss at a time, Right? You can do this the several ways like if you need to use only one file like application.scss then you can rename the file again e.g application.css.scss then for scss you would follow this
#import "bootstrap";
...
then for custom css above in the #import variable
/*
*= require custom
*= require custom_another
*/
make sure this custom file is formatted with .css and it's inside assets/stylesheets folder.
For saas file will use #import & for css file will use *= require.
Now if you need to use separate files for css & scss then it would look like this application.css
/*
*= require custom
*= require_tree .
*= require_self
*/
you can leave that application.css and for scss you can create a custom file inside assets/stylesheets like custom.scss then
#import "bootstrap";
When attempting to visit a page using Capybara and Rspec, I get the following error:
The error:
Failure/Error: visit login_path
ActionView::Template::Error:
Invalid CSS after "*": expected "{", was "= require boots..."
(in app/assets/stylesheets/application.css)
The file (/app/assets/stylesheets/application.css):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
*= require bootstrap.min
This code was generated by the twitter bootstrap rails generators provided by the gem, and as far as I know, the syntax is correct. Why is it complaining?
I would like to know if it's possible to require some assets over HTTP, eg:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_tree .
*= require 'http://assets.domain.com/stylesheets/style.css'
*/
I get a Sprockets::FileNotFound error with this snippet.
Thank you
The Sprockets readme notes that require takes a path, and makes no reference to pulling things off HTTP.
The JurassicCoffee project for .NET appears to have added the ability to load files over HTTP.
Same question but with JS...
I've seen several questions asking something similar, but I can't get this font to render in my production app using a computer that doesn't have the font installed.
http://fortawesome.github.com/Font-Awesome/
Installed this: https://github.com/bokmann/font-awesome-rails
Added this:
*= require 'font-awesome'
to application.css
The icons ARE working, e.g.:
<i class="icon-envelope"></i>
correctly renders an envelope icon that is actually one of the font-awesome fonts. However, I can't get the alphabetic font to display in production (I just see Times New Roman). I've tried these instructions to no avail:
http://blog.fieldforceapp.com/moving-to-heroku-bootstrap-font-awesome
I'm concerned there may be a conflict with other css in my stylesheets directory (in app/assets/stylesheets):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require select2
*= require bootstrap-timepicker
*= require 'font-awesome'
*= require_tree .
*= require zpp.css
*/
Do I need a separate fonts directory? I'm running rake assets:precompile and see the font .css files moving into my public directory, but still no go.
Would love some help on this b/c I've been scratching my head for too long now. Thank you!
I'd make sure the css file points correctly to the font files..
as for the "alphabetic font", font awesome doesnt have a separate font for alpha numeric characters so if your default font is times new roman, that is what you would see..