@import 在子文件夹中的 SASS 文件中不起作用

Posted

技术标签:

【中文标题】@import 在子文件夹中的 SASS 文件中不起作用【英文标题】:@import not working in SASS file in subfolder 【发布时间】:2012-11-14 23:27:33 【问题描述】:

搭建舞台

我有以下样式表结构:

/stylesheets   
 |
 |-- /subfolder
 |    |
 |    + styles.css.scss
 |
 + application.css.scss 

application.html.haml

  = stylesheet_link_tag "application", media: "all"
  = stylesheet_link_tag "subfolder/styles", media: "all"

application.css.scss

@import "styleguide";
@import "styleguide/base/_all";
@import "styleguide/modules/_all-no-grid";
// Omitting rules not relevant to the problem

styles.css.scss

@import "styleguide";
@import "styleguide/grid/_grid";
@import "styleguide/modules/_all-grid";
// Omitting rules not relevant to the problem

样式指南文件位于一个 gem 中,它在 RoR 引擎的帮助下为来自 vendor/stylesheets 的资产提供服务。

问题

当我使用预编译资产在生产环境中运行我的应用程序时,我遇到了指向样式指南的 @import 的问题。

File to import not found or unreadable: styleguide.
Load path: 
 Sass::Rails::Importer([omitted]/app/assets/stylesheets/local/styles.css.scss)
 (in [omitted]/app/assets/stylesheets/local/styles.css.scss)

解决方法

样式指南本身没有问题,因为只要我从 application.css.scss 文件导入 subfolder/styles.css.sccs 文件,一切都会按预期工作。

application.html.haml

  = stylesheet_link_tag "application", media: "all"

application.css.scss

@import "styleguide";
@import "styleguide/base/_all";
@import "styleguide/modules/_all-no-grid";
@import "subfolder/styles"
// Omitting rules not relevant to the problem

styles.css.scss

// Same as above, included for completeness
@import "styleguide";
@import "styleguide/grid/_grid";
@import "styleguide/modules/_all-grid";
// Omitting rules not relevant to the problem

解决方案

以前有没有人遇到过这样的事情?是否有任何已知问题可能导致这种情况发生?

【问题讨论】:

如果您想将您的 scss 文件导入到应用程序 scss 文件中,您应该引用不带“_”的导入...即。 @import "styleguide/base/all"; 【参考方案1】:

我猜这是在您的 styles.css.scss 文件中修改路径的简单问题。如果您的 styleguide 目录不在您的子文件夹中(它看起来不像),您将不得不在 styles.css.scss 中将您的导入路径指向上一层。 如果是这种情况,请尝试:

@import "../styleguide";
...

因为 application.css.scss 位于上一层,它在导入时会识别这些路径,而 styles.css.scss 则不会。

【讨论】:

以上是关于@import 在子文件夹中的 SASS 文件中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

SASS

Webpack2 不理解我的 SASS 文件中的 @import 语句(如何使用 webpack2 编译 SASS?)

Sass 中的 @if 语句中的 @import

sass @import 规则

@import 与 Sass 不合并文件 [重复]

为 sass 修改导入文件时,rails 中不符合样式