从 SASS 导入迁移到 Sprockets 需要（在 Rails 4 中）
Migrating from SASS Imports to Sprockets Require (in Rails 4)
我终于找到了为什么我的 Rails 开发环境慢得不可思议的答案。它与每次我刷新开发视图时 SASS @imports 样式表的方式有关，即使对样式表的更改可能很小。我的 Cloud9 云开发环境也因为内存限制无法跟上所有不断的编译，每天必须重启几次。
看这个post看看是什么问题
http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import
所以我决定放弃 SASS @imports 转而使用 Sprockets =requires 并且我不知道如何将我的 scss 文件迁移到常规 css sprockets 文件.
我有很多样式表，因为我购买了一个主题。我在资产和 vendor/assets 中都有资源。感谢任何帮助。
我的application.scss如下
// 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';
经过一些研究，这个方法奏效了：
在同一个清单文件中，使用 scss 扩展名和所有文件，只需在开头添加以下行：
*=require_self
然后将所有导入更改为 requires as comments BEFORE all the imports。
另外不要忘记添加开始 /* 和结束 */ 注释子句（参见示例）
我不得不将所有与 Boostrap 相关的样式表保留为导入而不是需要。否则我的主题不起作用。出于某种原因，简单的线条图标插件也将拒绝按要求工作，所以我也将其保留为导入。
执行此操作后，我的视图刷新开发延迟基本消失，我可以再次工作！ （90 秒对 6-7 秒）。
虽然从导入更改为要求时，我确实必须做一个额外的修复。
我的样式表中的 image-url 助手在生产中停止工作。我不得不将受影响的样式表的名称从 .css 更改为 .css.scss 并将所有 image-url 更改为 asset-url 助手，它们再次工作。有关详细信息，请参阅此 post：
Rails 4 image-path, image-url and asset-url no longer work in SCSS files
我转换后的 application.scss 现在看起来像这样：
/*
* 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';
我终于找到了为什么我的 Rails 开发环境慢得不可思议的答案。它与每次我刷新开发视图时 SASS @imports 样式表的方式有关，即使对样式表的更改可能很小。我的 Cloud9 云开发环境也因为内存限制无法跟上所有不断的编译，每天必须重启几次。
看这个post看看是什么问题
http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import
所以我决定放弃 SASS @imports 转而使用 Sprockets =requires 并且我不知道如何将我的 scss 文件迁移到常规 css sprockets 文件.
我有很多样式表，因为我购买了一个主题。我在资产和 vendor/assets 中都有资源。感谢任何帮助。
我的application.scss如下
// 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';
经过一些研究，这个方法奏效了：
在同一个清单文件中，使用 scss 扩展名和所有文件，只需在开头添加以下行：
*=require_self
然后将所有导入更改为 requires as comments BEFORE all the imports。
另外不要忘记添加开始 /* 和结束 */ 注释子句（参见示例）
我不得不将所有与 Boostrap 相关的样式表保留为导入而不是需要。否则我的主题不起作用。出于某种原因，简单的线条图标插件也将拒绝按要求工作，所以我也将其保留为导入。
执行此操作后，我的视图刷新开发延迟基本消失，我可以再次工作！ （90 秒对 6-7 秒）。
虽然从导入更改为要求时，我确实必须做一个额外的修复。
我的样式表中的 image-url 助手在生产中停止工作。我不得不将受影响的样式表的名称从 .css 更改为 .css.scss 并将所有 image-url 更改为 asset-url 助手，它们再次工作。有关详细信息，请参阅此 post：
Rails 4 image-path, image-url and asset-url no longer work in SCSS files
我转换后的 application.scss 现在看起来像这样：
/*
* 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';