如何在Rails中从application.scss中排除加载.css文件?

gk7wooem  于 2023-11-19  发布在  其他
关注(0)|答案(4)|浏览(118)

我有YooTheme和Bootstrap,它们互相干扰。设计师在主页上使用了YooTheme,我没有时间翻译它。我如何只在索引页中包含yootheme.css,并从其他任何地方的标题中排除它?我有
application.haml-布局

/ UIkit CSS
-# %link{:rel => "stylesheet", :href => "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css"}/
%link{:rel => "stylesheet", :crossorigin => "anonymous", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css", :integrity => "sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"}/
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

application.scss

*= require_tree .
 *= require_self

app/assets/stylesheets/yootheme.css
index.haml

=stylesheet_link_tag 'yootheme.css', media: :all
eulz3vhy

eulz3vhy1#

你可以在application.css文件中使用sprockets#stub和要排除的文件名,以防止其加载:

*= stub yootheme.css

字符串
然后要手动合并它,您必须将文件添加到assets.rb,重新启动服务器,并使用stylesheet_link_tag助手自行加载文件:

# config/initializers/assets.rb
# Rails.application.config.assets.precompile += %w( yootheme.css )

# view
= stylesheet_link_tag 'yootheme.css', media: :all

gorkyyrv

gorkyyrv2#

在SASS/SCSS中不要使用require_tree

Sprockets提供了一些指令,这些指令被放置在名为require、require_tree和require_self的注解中。**不要在Sass/SCSS文件中使用它们。**它们非常原始,不能很好地与Sass文件一起使用。相反,使用Sass的原生@import指令,sass-rails已经自定义了该指令,以与Rails项目的约定集成。https://github.com/rails/sass-rails
如果你没有使用任何Sass特性,比如变量,函数,mixin等,你可以用require_tree。但是一旦你这样做了,你就会意识到它们在任何文件中都不可用,除了它们被声明的文件。这是因为每个文件都是在Sprockets将文件连接在一起之前在SASS编译器中运行的。
因此,最好使用@import 'foo'并手动声明哪些文件以及它们应该添加到编译后的样式表中的顺序。

It's not as bad as it sound

默认的assets pipeline设置是一个很好的尝试,它可以让懒惰的程序员不要把所有的东西都塞进一个css/js文件中,同时仍然把它编译成一个优化的文件,它确实需要require_tree .才有意义。
我通常关闭资产生成器:

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.generators do |g|
      g.assets false
      # or
      g.stylesheets false
    end
  end
end

字符串
相反,我故意将app/assets中的代码组织成模块,任何不属于我的代码都放入/vendor中。
你可以使用glob导入来从库文件夹中导入sass mixin和variables--但是它不能/不应该替换require_tree

使用content_for代替单独的布局

使用一个单独的布局意味着你必须复制整个文件只是改变一行或两行。
相反,您可以使用content_for在布局中创建动态块:

# application.html.haml:
!!!
%html
  %head
    %title My Rails app
    - content_for :assets
      = stylesheet_link_tag "application"
      = javascript_include_tag "application"
    = csrf_meta_tag

  %body
    = yield


然后在index模板的后面,我们可以添加到head部分:

- content_for :assets
  = stylesheet_link_tag "some_other_file"


这将在= javascript_include_tag "application"下添加样式表链接,因为content_for将提供的块连接到已捕获的内容。使用flush: true丢弃任何先前提供的内容(根据布局)。

- content_for :assets, flush: true
  = stylesheet_link_tag "some_other_file"

dced5bon

dced5bon3#

像这样的东西
index.haml(layout)..

- if action_name=="index"
   /* include both application.css and yootheme.css for index*/
   = stylesheet_link_tag 'application', 'yootheme.css', media: :all
- else
   /* include only application.css*/
   =stylesheet_link_tag 'application, media: :all

字符串

taor4pac

taor4pac4#

scss_files:'app/assets/stylesheets//*.css.scss'
exclude:'app/assets/stylesheets/plugins/
'
linters:BorderZero:enabled:false
缩进:排除:- 'path/to/file.scss' - 'path/to/directory/**'严重性:警告宽度:2

相关问题