Rails中正确的SCSS资产结构

CSS

猴子JinJin

2020-03-18

所以，我有一个app/assets/stylesheets/看起来像这样的目录结构：

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

在每个目录中，都有多个sass部分（通常是* .css.scss，但是一个或两个* .css.scss.erb）。

我可能有很多假设，但是rails应该由于*= require_tree .application.css中的内容自动编译那些目录中的所有文件，对吗？

我最近尝试通过删除所有颜色变量并将它们放在根app/assets/stylesheets文件夹（_colors.css.scss）中的文件中来重组这些文件。然后，我在app/assets/stylesheets名为master.css.scss 的根文件夹中创建了一个文件，如下所示：

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

我不太了解Rails如何处理资产编译的顺序，但是显然这对我不利。似乎没有文件意识到要导入任何变量或mixins，因此会引发错误，我无法编译。

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

该变量$dialog_divider_color在_colors.css.scss中明确定义，并且_master.css.scss正在导入颜色和所有我的mixins。但是显然，rails没有得到该备忘录。

有什么办法可以解决这些错误，还是需要将所有变量定义以及所有mixin导入放回每个文件中？

不幸的是，这个家伙似乎并不认为有可能，但我希望他错了。任何想法都将不胜感激。

第2025篇《Rails中正确的SCSS资产结构》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
梅老丝 2020.03.18

根据此问题，您只能使用application.css.sass来定义模板之间的导入和共享变量。

=>这似乎只是名称问题。

另一种方法可以包括所有内容并禁用此管道。

斯丁 2020.03.18

CSS的问题是，您不想自动添加所有文件。浏览器加载和处理工作表的顺序至关重要。因此，您最终总是会明确地导入所有CSS。

举个例子，假设您有一个normalize.css表，以获取默认外观，而不是所有可怕的不同浏览器实现。这应该是浏览器加载的第一个文件。如果仅将此表随机包含在CSS导入中的某个位置，则它将不仅覆盖浏览器的默认样式，而且覆盖所有在其之前加载的CSS文件中定义的样式。变量和混入也是如此。

在Euruko2012上看到Roy Tomeij的演讲后，如果您要管理大量CSS，我决定采用以下方法。

我通常使用这种方法：

  1. 将所有现有的.css文件重命名为.scss
  2. 从application.scss中删除所有内容

开始将@import指令添加到中application.scss。

如果您使用的是twitters bootstrap和自己的一些css表，则必须首先导入bootstrap，因为它有一个表可以重置样式。因此，您将添加@import "bootstrap/bootstrap.scss";到application.scss。

bootstrap.scss文件如下所示：

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

您的application.scss文件如下所示：

@import "bootstrap/bootstrap.scss";

由于导入的顺序，您现在可以使用变量，该变量随导入之后的@import "variables.scss";任何其他.scss文件一起加载。因此，它们可以type.scss在bootstrap文件夹中使用，也可以在中使用my_model.css.scss。

之后，创建一个名为partials或的文件夹modules。这将是其他大多数文件的位置。您可以将导入添加到application.scss文件中，使其看起来像：

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Now if you make a bit of css to style an article on your homepage. Just create partials/_article.scss and it will be added to the compiled application.css. Because of the import order you can also use any bootstrap mixins and variables in your own scss files.

The only drawback of this method I found so far is, sometimes you have to force a recompile of the partial/*.scss files because rails wont always do it for you.

Itachi蛋蛋 2020.03.18

我有一个非常类似的问题。帮助我的是，在导入部分代码时，在@import语句下划线。所以

@import "_base";

代替

@import "base";

这可能是一个奇怪的错误...

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android