从 SASS 导入迁移到 Sprocket 需要（在 Rails 4 中）

Question

我终于找到了为什么我的 Rails 开发环境如此缓慢的答案。每次我刷新我的开发视图时，它都与 SASS @imports 样式表的方式有关，即使对样式表的更改可能很小。由于内存限制，我的 Cloud9 云开发环境也无法跟上所有不断的编译，每天必须重新启动几次。

查看这篇文章，看看是什么问题

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

所以我决定放弃 SASS @imports 转而使用 Sprockets =requires，但我不知道如何将我的 scss 文件迁移到常规的 css sprockets 文件中。

我有很多样式表，因为我购买了一个主题。我在资产和供应商/资产方面都有资源。任何帮助表示赞赏。

我的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';

Answer 1

经过一番研究，这行得通：

在同一个清单文件中，带有 scss 扩展名和所有，只需在开头添加以下行：

*=require_self

然后在所有导入之前将所有导入更改为要求作为 cmets。

另外不要忘记添加开始 /* 和结束 */ 注释子句（参见示例）

我不得不将所有与 Boostrap 相关的样式表保留为导入而不是必需。否则我的主题不起作用。出于某种原因，简单的线条图标插件也会拒绝作为必需项工作，因此我也将其保留为导入。

完成此操作后，我在开发中的视图刷新延迟大部分都消失了，我可以再次工作！ （90 秒对 6-7 秒）。

虽然从 import 更改为 require 时，我确实需要做一个额外的修复。

我的样式表中的图像 URL 助手停止在生产环境中工作。我不得不将受影响的样式表的名称从 .css 更改为 .css.scss 并将所有 image-url 更改为 assets-url 帮助程序，它们又可以工作了。有关详细信息，请参阅此帖子：

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';