scss 文件影响多个视图的问题 [英] Problem with scss files affecting more than one view

问题描述

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

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

我不明白为什么会发生这种情况.stats.scss 文件不应该只影响 stats 视图吗?

颜色也没有在 application.scss 或 scaffolds.scss 文件中设置，所以我不知道为什么每个视图都受到 <代码>stats.scss 文件.

解决方案

这是因为 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.新闻表{背景:黄色"；}//统计.scss.stats 表{背景:红色"；}

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

...

<小时>

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

//application.scss.red-bg{背景:红色；}.yellow-bg{背景:黄色；}

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

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

I'm building a football league web page with ruby on rails. I have three pages(scaffolds) created: news, stats and leaderboard. Each one of them has a scss file and is also affected by application.scss and scaffolds.scss.

When I change the background color of a table (or anything else) for the stats page to red(just a random color) in stats.scss, both the news and leaderboard views are also affected and change their colors to red, even if I had set them to a different color in their own scss files(like blue and green).

I don't understand why this is happening. Isn't the stats.scss file supposed to affect only the stats view?

The colors aren't set in the application.scss or scaffolds.scss files either, so I don't know why every view is being affected by the stats.scss file.

解决方案

This is because rails(or asset pipeline to be precise) will include all your .scss files in every page in development environment. Right click on your HTML page -> click "View Page source" and you can see all .scss files.

Rails gives you structure of files like news.scss or leaderboard.scss in css folder so that you can organize your controller specific code to make your code life productive. Rails will then bundle and minimize/optimize all of these files in to one file application.scss in production environment.

When I change the background color of a table (or anything else) for the stats page to red(just a random color) in stats.scss, both the news and leaderboard views are also affected and change their colors to red, even if I had set them to a different color in their own scss files(like blue and green).

This is because your leaderboard and news.scss is loaded first and then stats.scss is loaded. Rails asset pipeline will load the CSS files in Ascending order when you use require tree . in application.scss. Thus, the color values of leaderboard.scss and news.scss don't apply as stats.scss is inluded at the last.

You should consider using different classes or make global background class colors. Ex:

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

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

Then in your news.html.erb file you can use:

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

---

Or you can do this the global way:

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

.yellow-bg{
  background: yellow;
}

Then in your news.html.erb and stats.scss files:

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

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

这篇关于scss 文件影响多个视图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！