scss 文件影响多个视图的问题答案

【问题标题】：Problem with scss files affecting more than one viewscss 文件影响多个视图的问题
【发布时间】：2019-12-20 22:21:18
【问题描述】：

我正在使用 ruby on rails 构建一个足球联赛网页。我创建了三个页面（脚手架）：新闻、统计数据和排行榜。他们每个人都有一个scss文件，并且还受到application.scss和scaffolds.scss的影响。

当我在stats.scss 中将统计页面的表格（或其他任何内容）的背景颜色更改为红色（只是随机颜色）时，新闻和排行榜视图也会受到影响并将它们的颜色更改为红色，即使我在他们自己的 scss 文件中将它们设置为不同的颜色（如蓝色和绿色）。

我不明白为什么会这样。 stats.scss 文件不应该只影响统计视图吗？

application.scss 或scaffolds.scss 文件中也没有设置颜色，所以我不知道为什么每个视图都会受到stats.scss 文件的影响。

【问题讨论】：

听起来您正在尝试使用 per-page-CSS，但实际上是在所有页面上加载所有 CSS。
我的建议是查看webpacker，并将您的视图配置为仅加载所需的包，而不是始终加载所有内容。

标签： css ruby-on-rails ruby sass

【解决方案1】：

这是因为 rails（或准确地说是资产管道）将在开发环境的每个页面中包含您的所有 .scss 文件。右击你的HTML页面->点击“查看页面源代码”，你就可以看到所有.scss文件了。

Rails 为您提供 css 文件夹中的 news.scss 或 leaderboard.scss 之类的文件结构，以便您可以组织控制器特定代码以使您的代码高效运行。然后，Rails 将在生产环境中将所有这些文件捆绑并最小化/优化到一个文件application.scss。

当我在 stats.scss 中将统计信息页面的表格（或其他任何内容）的背景颜色更改为红色（只是随机颜色）时，新闻和排行榜视图也会受到影响并将其颜色更改为红色，即使我在他们自己的 scss 文件中将它们设置为不同的颜色（如蓝色和绿色）。

这是因为您的 leaderboard 和 news.scss 先加载，然后再加载 stats.scss。当您在application.scss 中使用require tree . 时，Rails 资产管道将按升序加载 CSS 文件。因此，leaderboard.scss 和 news.scss 的颜色值不适用，因为 stats.scss 被包含在最后。

您应该考虑使用不同的类或制作全局背景类颜色。例如：

// news.scss
.news-table{
  background: "yellow";
}

// stats.scss
.stats-table{
  background: "red";
}

然后在您的news.html.erb 文件中您可以使用：

<table class="news-table">...</table>

或者您可以通过全局方式执行此操作：

// application.scss
.red-bg{
  background: red;
}

.yellow-bg{
  background: yellow;
}

然后在您的 news.html.erb 和 stats.scss 文件中：

// news.html.erb
<table class="red-bg">...</table>

// stats.html.erb
<table class="yellow-bg">...</table>

【讨论】：