Migrating from SASS Imports to Sprockets Require (in Rails 4)

Question

I have finally found the answer to why my Rails development environment is impossibly slow. It has to do with the way SASS @imports stylesheets over and over again each time I refresh my development views, even though the changes to the stylesheets might be minimal. My Cloud9 cloud development environment is also unable to keep up with all the constant compiling due to memory constraints and must be rebooted a couple of times per day.

See this post to see what the problem is

http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import

So I have decided to ditch SASS @imports in favor of Sprockets =requires and I have no idea how to migrate my scss file into a regular css sprockets file.

I have lots of stylesheets as I have purchases a theme. I have resources both in assets and in vendor/assets. Any help is appreciated.

My application.scss is as follows

// The organization of this CSS is heavily inspired by GitHub's CSS
// stylesheet guidelines.
//
//   See: https://github.com/styleguide/css
//
// See Bootstrap's CSS at:
//   https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap
// or
//   $ bundle show bootstrap-sass
//


// These both need to be imported before bootstrap:
@import 'globals/fonts';
@import 'globals/variables';


// --------------Bootstrap-----------------------------
@import 'bootstrap-sprockets';
@import 'bootstrap';

// --------------Font Awesome-----------------------------
@import 'font-awesome';


// --------------Social Share Buttons-----------------
@import "social-share-button";

// --------------Sweet Alert-----------------
@import 'sweetalert';


// --------------Global definitions--------------------
// For example (add your own!!):
@import 'globals/mixins';


// --------------Shared styles-------------------------
// Common base CSS modifications. For example:
@import 'shared/buttons';
@import 'shared/grid';

// --------------Components----------------------------
// Create your own and modify/extend Bootstrap's. For example:
@import 'components/panel';


// --------------Sections------------------------------
// Page-specific styles. These should *only* be used as a last
// resort if you really truly can't style your content more generally.
@import 'sections/profile_page';

// --------------Jango Base Theme------------------------------
@import 'components';
@import 'plugins';
@import 'default';
// --------------Jango Plugins------------------------------
@import 'animate/animate';
@import 'bootstrap-social/bootstrap-social';
@import 'cubeportfolio/css/cubeportfolio';
@import 'owl-carousel/owl.carousel';
@import 'owl-carousel/owl.theme';
@import 'owl-carousel/owl.transitions';
@import 'revo-slider/css/settings-ie8';
@import 'revo-slider/css/settings';
@import 'simple-line-icons/simple-line-icons';
@import 'slider-for-bootstrap/css/slider';
@import 'socicon/socicon';
@import 'fancybox';
// --------------Deseo Cumplido Custom CSS-------------------------
@import 'deseo_custom';
// --------------Datepicker Bootstrap 3------------------
@import 'bootstrap-datepicker';
@import 'bootstrap-datepicker3';
// --------------Bootstrap Slider------------------
@import 'bootstrap-slider';

score 0 · Accepted Answer · edited May 23 '17 at 12:15

After some research, this worked:

In the same manifest file, with scss extension and all, just add the following line at the start:

*=require_self

then change all your imports to requires as comments BEFORE all the imports.

Also don't forget to add the opening /* and closing */ comment clauses (see example)

I had to leave all Boostrap related stylesheets as imports instead of requires. Otherwise my theme didn't work. For some reason, the simple line icons plugin would also refuse to work as a require so I left it as an import too.

After doing this my view refresh delays in development are mostly gone and I can work again! (90 seconds vs 6-7 seconds).

I did have to do an additional fix though when changing from import to require.

My image-url helpers in my stylesheets stoped working in production. I had to change the names of my affected stylesheets from .css to .css.scss and change all image-url to asset-url helpers and they worked again. See this post for more info:

Rails 4 image-path, image-url and asset-url no longer work in SCSS files

My converted application.scss now looks like this:

/*
 * 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_self
 *= require font-awesome
 *= require social-share-button
 *= require sweetalert
 *= require components
 *= require plugins
 *= require default
 *= require animate/animate
 *= require bootstrap-social/bootstrap-social
 *= require cubeportfolio/css/cubeportfolio
 *= require owl-carousel/owl.carousel
 *= require owl-carousel/owl.theme
 *= require owl-carousel/owl.transitions
 *= require revo-slider/css/settings-ie8
 *= require revo-slider/css/settings
 *= require slider-for-bootstrap/css/slider
 *= require socicon/socicon
 *= require fancybox
 *= require deseo_custom
 *= require bootstrap-datepicker
 *= require bootstrap-datepicker3
 *= require bootstrap-slider
 */

// These both need to be imported before bootstrap:
@import 'globals/fonts';
@import 'globals/variables';

// --------------Global definitions and shared styles------------

@import 'globals/mixins';
@import 'components/panel';
@import 'sections/profile_page';

// --------------Bootstrap-----------------------------
@import 'bootstrap-sprockets';
@import 'bootstrap';
// --------------Simple Line Icons-----------------------------
@import 'simple-line-icons/simple-line-icons';

Migrating from SASS Imports to Sprockets Require (in Rails 4)

1 Answers1