我有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
4条答案
按热度按时间eulz3vhy1#
你可以在application.css文件中使用
sprockets#stub
和要排除的文件名,以防止其加载:字符串
然后要手动合并它,您必须将文件添加到
assets.rb
,重新启动服务器,并使用stylesheet_link_tag
助手自行加载文件:型
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 .
才有意义。我通常关闭资产生成器:
字符串
相反,我故意将
app/assets
中的代码组织成模块,任何不属于我的代码都放入/vendor
中。你可以使用glob导入来从库文件夹中导入sass mixin和variables--但是它不能/不应该替换
require_tree
。使用content_for代替单独的布局
使用一个单独的布局意味着你必须复制整个文件只是改变一行或两行。
相反,您可以使用
content_for
在布局中创建动态块:型
然后在
index
模板的后面,我们可以添加到head
部分:型
这将在
= javascript_include_tag "application"
下添加样式表链接,因为content_for将提供的块连接到已捕获的内容。使用flush: true
丢弃任何先前提供的内容(根据布局)。型
dced5bon3#
像这样的东西
index.haml(layout)..
字符串
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