My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
Related
I'm designing a site using Laravel Mix on local. I have lots of scss lifes in resources/assets/sass and through app.scss I combine them it looks just the way it's supposed to be on local using npm run watch and php artisan serve
But when I set the site up on a server, all the css classes are missing, therefore design doesn't implement itself on the website. For instance I have a class future-concerts which styles the element it suggests. So I check for .future-concerts inside public\css\app.css there is no such class. What might be causing this? Even just copying app.css file to the server doesn't work. It just deletes most of the lines I wrote.
app.scss file
// Fonts
#import url('https://fonts.googleapis.com/css?family=Abhaya+Libre|Mitr|Raleway');
// Variables
#import "variables";
#import "custom";
#import "directives";
// Bootstrap
#import "bootstrap.min";
#import "bootstrap-theme.min";
// Fotorama
#import "fotorama";
// Animate.css
#import "animate";
// Font Awesome
#import "font-awesome.min";
webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I'm install bootstrap gem and follow all direction to change application.css, however when I create another custom .scss file, customizations from the custom file werent included in application.css.scss . I have tried to import boot strap and bootstrap-sprockets to the custom file as well, but no changes were made on the website. How can I make the customizations on the newly created custom.scss file to show on the website.
the application.css.scss file contains only 2 lines
#import "bootstrap-sprockets";
#import "bootstrap";
If I've read your question correctly, you have application.scss, which contains
#import "bootstrap-sprockets";
#import "bootstrap";
and also your custom.scss file, contents of which you want to end up in application.css. You need to add it to your application.scss file, ie -
#import "bootstrap-sprockets";
#import "bootstrap";
#import "custom";
It's also recommended to begin the name of .scss files which you are importing (also known as partials) with an underscore, so in this case custom.scss becomes _custom.scss.
And make sure you recompile the application.scss to application.css so the changes are actually made - I'm not sure what you're using to compile your sass but I think this may be the step you are missing.
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
I installed twitter-bootstrap-rails gem with less support by adding the following in my Gemfile:
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
After running a bundle install, I went ahead and ran the generator:
rails generate bootstrap:install static
My application.css in app/assets/stylesheets/ has the following in it:
*= require_self
*= require_tree .
If I view source, I do see the following there:
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
So that's there. Then I started playing with the Grid system and added the markup show-grid and noticed there's no style for it. I proceeded to add the following in my bootstrap_and_override.css.less file:
#import "twitter/bootstrap/reset.less";
#import "twitter/bootstrap/variables.less";
#import "twitter/bootstrap/mixins.less";
#import "twitter/bootstrap/scaffolding.less";
#import "twitter/bootstrap/grid.less";
#import "twitter/bootstrap/layouts.less";
#import "twitter/bootstrap/type.less";
#import "twitter/bootstrap/forms.less";
#import "twitter/bootstrap/wells.less";
#import "twitter/bootstrap/component-animations.less";
#import "twitter/bootstrap/buttons.less";
#import "twitter/bootstrap/close.less";
#import "twitter/bootstrap/navs.less";
#import "twitter/bootstrap/navbar.less";
#import "twitter/bootstrap/labels-badges.less";
#import "twitter/bootstrap/hero-unit.less";
#import "twitter/bootstrap/utilities.less";
#import "twitter/bootstrap/responsive";
After adding these, I started the local Rails server up and still don't see the markup in the application. Must be doing something wrong here. Does application.css need to be renamed application.css.less? Do I need to recompile something? I'm guessing show-grid styling is on one of the imports below (probably grid.less), and I'm guessing that something I'm doing incorrectly is not importing those stylesheets.
Where's a good step to begin troubleshooting this?
The Bootstrap show-grid class comes from the docs.css that Bootstrap use on their own demo site.
I don't think it's really meant to be used by folk who download Bootstrap but I guess there's nothing stopping you using it.
The css is in this file:
http://twitter.github.com/bootstrap/assets/css/docs.css
And it's used here on Bootstrap:
http://twitter.github.com/bootstrap/scaffolding.html
I'm writing a simple app using Twitter Bootstrap. In my main HTML file I have the following lines:
<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>
so every time I refresh the page, the whole css gets generated.
This takes about 15 seconds each time, so it's a pain waiting for the page to load.
I tried using SimpLESS to generate css out of the less files but the generation failed.
I'll try to get that to work, but I'm also wondering whether I'm not doing something wrong...
I dislike the fact that the css is generated each time, even if I don't change the less files. Is there a way to make less cache the css somehow?
Or perhaps there are other alternative solutions to this problem?
I would suggest removing parts of your .less file(s) to see if anything specific is causing poor performance. It shouldn't be that slow. My guess is that a particular mixin or function is causing the issue.
I would also suggest profiling the JavaScript (Chrome has a nice JS profiler) to see if anything obvious appears, like a LESS-related function which is slow and called repeatedly.
Here's my overall LESS strategy which might be helpful to you in the future. I'm using Visual Studio and ASP.Net, but you could do this with a variety of environments.
Most importantly, no JavaScript for LESS. Everything is done server-side.
In development, I request my .less files through the dotLess HTTP handler, which processes them and handles the caching. Every now and then, the cache glitches and I have to restart my local web server, but it's not a big deal. This enables me to make real-time changes to my less and see them by just refreshing the page. It's also fast.
Example: <link rel="stylesheet" href="foo.less" />
For production, I use a build action to compile my .less files into a single CSS file and reference the CSS file directly in the page. This takes everything dynamic out of the equation.
Example: <link rel="stylesheet" href="final.css" />
do you need every part from Bootstrap? Because that a lot of bloat code.
Try to disable some part from the main bootstrap file:
Do you need all the CSS for JavaScript parts?
Do you need 'code' & 'tables'?
In "responsive-utilities", you can comment out a lot if you don't need it.
Let me show you my setup, it's in SASS, but the principle stays the same:
// Compass utilities
#import "compass";
// Core variables and mixins
#import "includes/variables";
#import "includes/mixins";
// Reset
#import "includes/normalize";
#import "bootstrap/print";
// Core CSS
#import "includes/scaffolding";
#import "includes/type";
//#import "bootstrap/code";
#import "includes/grid";
//#import "bootstrap/tables";
#import "includes/forms";
#import "includes/buttons";
// Components: common
#import "includes/component-animations";
#import "bootstrap/glyphicons";
//#import "includes/dropdowns";
#import "includes/button-groups";
//#import "bootstrap/input-groups";
//#import "bootstrap/navs";
//#import "includes/navbar";
//#import "bootstrap/breadcrumbs";
//#import "bootstrap/pagination";
//#import "bootstrap/pager";
//#import "bootstrap/labels";
//#import "bootstrap/badges";
//#import "bootstrap/jumbotron";
//#import "bootstrap/thumbnails";
//#import "bootstrap/progress-bars";
//#import "bootstrap/media";
//#import "bootstrap/list-group";
//#import "bootstrap/panels";
//#import "bootstrap/wells";
#import "includes/close";
// Components w/ javascript
#import "includes/alerts";
#import "bootstrap/modals";
//#import "bootstrap/tooltip";
#import "includes/popovers";
//#import "includes/carousel";
// Utility classes
#import "bootstrap/utilities"; // Has to be last to override when necessary
#import "bootstrap/responsive-utilities";
//custom styling
#import "includes/customstyles";