I am using the webpacker gem (v4.0.7) for assets as is default in Rails 6.
My stylesheet assets are loading via app/javascripts/stylesheets/application.scss file
However, the order of listing of stylesheet assets in this file is not reflected in the compiled css in development, e.g.
application.scss:
#import "~bootstrap/dist/css/bootstrap";
#import "./theme/style.css";
And when I load the page I see the bootstrap stylesheet take precedence over style.css:
Is there a way to control the order of inclusion?
Figured this one out and it's to do with scss rather than webpack(er)
In my application.scss the files I was importing were .css files which were therefore not compiling as such. Changing these to .scss files meant that they were compiled in the order specified.
(This is the article that ultimately led me to a fix: https://vanseodesign.com/css/sass-the-import-directive/)
Related
Question 1:
I've heard of creating div class' to cater to certain areas of the HTML but is there another way out there? Here's a link that I found related to what I mean.
http://brandonhilkert.com/blog/page-specific-javascript-in-rails/
Question 2:
Is there a way in order for me to organize my CSS and JavaScripts in my asset folder in the rails app IN SPECIFIC FOLDERS while accessing the asset pipeline benefits?
Eg.
Normal way:
assets
images(under assets)
stylesheets(under assets)
mycss1 CSS scss
mycss2 CSS scss
mycss3 CSS scss
javascripts(under assets)
myjava1 js
myjava2 js
myjava custom js
The Idea:
assets
images(under assets)
stylesheets(under assets)
myview(this is a subfolder of the stylesheets folder)
mycss1 CSS scss
mycss2 CSS scss
homepage(subfolder)
mycss3 CSS scss
javascripts(under assets)
myview(subfolder of javascripts)
myjava1 js
homepage(subfolder)
myjava2 js
myjava2 custom js
As far as I understand, you want to add your custom folders under the assets directory, put some files with specific CSS and JS and use them whenever you need it.
To achieve this you should include those files somewhere. By default, you have an appplication layout which includes application.js and application.css files which includes the rest of the related files. Those files known as manifest files and they are using sprockets gem to handle dependencies, preprocessing, compressing and other stuff (you can read more about it here). You can change the assets folder using config.assets.prefix or add new paths to look up for sprockets using config.assets.paths (This might be what you are looking for. Further reading here)
I have a plugin with many types of files, and its own tree structure (html, css, js, documentation, images, etc)
Rather than going through the plugin folder, and splitting all the css and js files into the vendor/assets/js/ vendor/assets/css/ folders, I want to just keep the entire plugin folder as is. For example,
vendor/assets/multipurpose_bookshelf_slider/
How do I make sure the paths load properly, and reference them in my manifest files?
Currently, I have some files place as follows (not exhaustive)
/my_app/vendor/assets/multipurpose_bookshelf_slider/css/skin01.css
/my_app/vendor/assets/multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
/my_app/vendor/assets/multipurpose_bookshelf_slider/
/my_app/vendor/assets/multipurpose_bookshelf_slider/
I'm referencing them in
application.js
//= require multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
//= require multipurpose_bookshelf_slider/js/jquery.bookshelfslider.min.js
application.css.scss
#import "css/bookshelf_slider";
#import "css/skin01";
Any folder created directly under assets will be added to the load paths. Files in that folder can be referenced as usual like so:
If you have
vendor/assets/custom/js/file.js
vendor/assets/custom/css/file.css
then vendor/assets/custom/ will be added to the load paths.
Include your files in the following files by doing the following:
application.js
//= require js/file
application.css.scss
#import "css/file";
Once that's done, make sure to restart your local server, since it is upon starting your server that the load paths get recognized.
Note: to see a list of load paths, type in your terminal rails c, then type Rails.application.config.assets.paths.
If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I prefer D7na's answer but with a bit of improvement in my opinion.
As long as this is related to assets, I think it is better to be placed in the assets.rb file.
assets.rb:
Rails.application.config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I have decided to host my own jQuery mobile files as the gem jquery_mobile_rails only includes version 1.3.0 while I want to ensure I always have the latest version of jQM. This proved surprisingly easy as i just added the js file under javascripts and the css under stylesheets in my assets folder.
I copied the icon buttons to both /assets/images and to /assets/stylesheets/images. They are displayed properly in development but not in production. My console is showing the images being precompiled.
I have the following in production.rb
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif application-print.css)
Whereas Rails 3.2 would generate both a fingerprinted (picture-df71a1234da231a124a.png) and non-fingerprinted (picture.png) asset during precompilation, Rails 4 no longer generates non-fingerprinted versions.
Most likely, the CSS file from jQuery Mobile contains references such as this:
background-image: url(images/icons-18-white.png)
The problem being that the CSS file has no clue what the fingerprint should be. The best solution would be to use Rails' asset path helpers. First, make sure the file is an SCSS file (just rename it so it's something like jquery.mobile-1.3.1.css.scss). This will tell rails to compile it using Sass.
Next, change all of the url(...) entries in the css file to image-url(...). Make sure to add quotes around the path. For example, this would load the file at app/assets/images/images/icons-18-white.png (which becomes public/assets/images/icons-18-white.png in production).
background-image: image-url("images/icons-18-white.png")
Upon deploying these changes, the jQuery mobile css file should get precompiled and the resulting file should include the proper fingerprinted URLs.
How do I install a custom theme for twitter-bootstrap with the rails asset pipeline?
Should I create a new folder under assets and dump in all of the css, js, image and font files for the theme?
Update:
I put all files in my downloaded theme (except the html example files) into a folder in app/assets and added this folder to my asset paths in application.rb:
config.assets.paths << Rails.root.join("app", "assets", "bootstrap_theme")
I added some markup using css classes from the theme but it's not using the theme..
Update: I see that the boostrap theme has the compiled core bootstrap files included inside it. Should I take this to mean it's not intended to be used with Less?
Also, should I precompile every asset file individually for production (in application.rb) and in each view include the specific ones needed (and include them after the core bootstrap files)? Then I guess to make any overrides to the theme they'd need to be made directly in the theme files?
Update: I think the problem was that I was requiring the theme css files in my manifest after the bootstrap_and_overrides, assuming the idea of the theme was to change the bootstrap defaults. But requiring some of the theme css before the standard bootstrap_and_defaults works better. It means needing to manually pick and choose which css to load before and after bootstrap.
I never proved the twitter bootstrap in a rails application but I searched before how can I do it.
If you install the gem less-rails-bootstrap or bootstrap-sass, you can follow the instructions to modify the theme here.
I hope it helps.
I'm using Jammit to package assets and Sass to generate stylesheets in a Rails 3 app. There are around 35 stylesheets for different site components and all are individually listed in our Jammit config. I would like to get to something based more on convention, ie:
stylesheets:
common:
- public/stylesheets/application.css
- public/stylesheets/components/*.css
- public/stylesheets/pages/*.css
The only hurdle I am running into is that I can't find a way to enforce a one-to-one mapping between sass files and css files. The above approach would remove the need to mess with the Jammit config and would automatically add new css files to the site, but if I were to remove a sass file the CSS file would still exist and would still be in our common package. CSS files are ignored in the working tree. Any way to tell Sass to remove CSS files with no template or do I have to add our CSS files to the repo? Is there another option?
Since the CSS files are automatically generated, you can safely just delete the whole directory if you ever want to clean it, and then have Sass regenerate them.