刷新页面时，Sass更改未显示

Question

My Rails 4.2现在使用了许多Sass变量，并且它从依赖sprockets require语句转换为Sass @import语句。它现在有2个问题正在开发中：

• 页面加载速度可能会慢一些
• 当我刷新页面时，CSS更改并不总是显示，所以我需要在新标签页中打开页面。

我该如何解决这个问题？

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;
//...

Answer 1

我要看的一件事是删除Sass导入的文件扩展名，并将application.css重命名为application.scss，以便文件知道它会将Sass预编译为CSS。

application.scss

@import "main";

main.scss

@import "base/variables";
@import "styles/home";
@import "styles/pages";

如果您使用Bootstrap Sass，他们的文档会逐步设置您的文件结构，以便在项目中包含Sass。

Answer 2

在config / environments / development.rb中，确保包含

config.cache_classes = false

这样，每次刷新页面时都会重新加载所有资源和代码。您通常只需要在迁移后重新加载服务器。