18

我正在使用 SASS 在 Rails 3.1(sass-rails 3.1) 应用程序中加载样式表。例如，使用 in 加载 sass partials app/assets/stylesheetsin -@importapplication.sass

 @import "pages/common"
 @import "pages/**/*"
 @import "jquery-ui.css"

现在，我也想加载vendor/assets/stylesheets. 请注意，我没有使用require vendor，这@import pages/*似乎是 sass 推荐的做法。这里的文件将是css，而不是sass或scss。我不能使用@import ../../../vendor/assets/stylesheets/*它，因为它仅适用于sass和scss文件。

有什么办法吗？

更新

我现在拥有的是这个。

application.css.scss

//= require_tree .
//= require vendor
//= require_self

这包括上面提到的所有 sass 部分。require vendor在_

vendor/assets/stylesheets/vendor.css好像

//= require_tree .

这种方法的一个警告是 sass mixins（用户定义和插件）和公共变量并非在所有部分中都可用。我现在拥有的是_common_imports.sass我@import在所有部分中的第一件事。

common_imports.sass

@import "colors"
@import "compass/css3/gradient"
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"

导入common_imports所有部分感觉非常重复。

4

6 回答 6

22

如果我理解正确，我认为这可能会有所帮助。

将以下内容添加到块config/application.rb内class Application < Rails::Application：

config.sass.load_paths << File.expand_path('../../lib/assets/stylesheets/')
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')

我刚刚将上述内容添加到应用程序中，以下指令现在都可以正常工作：

  • Import Sass:
    @import 'grid'inapp/assets/stylesheets/application.css.scss查找文件vendor/assets/stylesheets/_grid.scss；
  • 导入常规 CSS：
    @import 'background'，再次在 中application.css.scss，找到vendor/assets/stylesheets/background.css.

这有帮助吗？对不起，如果我误解了这个问题！

于 2011-09-30T21:24:48.967 回答
4

请注意，如果您创建了任何新的 vendor/* 目录（例如 vendor/stylesheets），则需要重新启动 rails。如果您在 Rails 3.2 或更高版本中看到这种情况，这可能是最有可能的罪魁祸首。

于 2013-12-03T23:04:22.537 回答
3

尝试将扩展名更改.scss为您的供应商样式表。

一旦我这样做了，SASS 就能够找到所需的导入。

于 2013-08-06T01:17:46.980 回答
3

您可以使用以下路径从供应商/资产加载资产文件。

将下面的行放入您的 application.css 文件中，这将非常有用。

 *= require_tree ../../../vendor/assets/stylesheets/.

Javascript 资产也可以做同样的事情。

于 2014-06-03T06:57:26.683 回答
2

嗯，我会说你以一种奇怪的方式使用资产管理器。

app/assets/ 、 lib/assets/和 vendor/assets/* 中的所有内容都映射在 /assets/ 中的同一位置，因此，在 Web 端，它们似乎都在同一个文件夹中。

在 rails 3.1 中，您应该做的不是使用 css/sass@import而是使用 sprockets require。

您应该在 application.sass 的顶部有：

// require pages/common
// require_tree ./pages
// require jquery-ui
// require_self

这样 sprockets 将所有内容放在生产中的同一个文件中，而您不必加载一堆文件。

于 2011-09-10T19:14:13.817 回答
0

当您使用引擎时，这会变得更加棘手。一个快速的猴子路径是在SASS_PATH环境变量中包含引擎供应商路径。这对我有用engine.rb：

ENV['SASS_PATH'] = "#{ENV['SASS_PATH']}:#{File.expand_path('../../vendor/assets/stylesheets/')}"

从那时起，当您在项目中包含多个引擎时，您总是可以将其放入一个方法中来干燥它。

于 2013-11-11T22:53:34.817 回答