javascript - css 文件不加载 application.scss

标签 javascript jquery css ruby-on-rails bootstrap-sass

我在我的 vendor 库中添加了一些 css 文件,我正试图让它们在我的应用程序上运行。当我打开我的开发页面查看文件时,我看到了完整的 css

 http://0.0.0.0:3000/assets/application.css.scss

但它在实际页面上不起作用。当我查看页面的源代码时,我看到了

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>

但是它显示了 js 文件而不是附加的 css 文件。为什么它会显示 js 文件而不显示 css 文件。我像这样将额外的 css 文件导入到 application.scss 中......

@import "fontello";
@import "font-awesome";
@import "animation";
@import "hover";
@import "morphext";
@import "settings-ie8";
@import "settings";
@import "fontello-codes";
@import "fontello-embedded";
@import "fontello-ie7-codes";
@import "fontello-ie7";
@import "owl.carousel";
@import "owl.theme";
@import "owl.transitions";
@import "bootstrap";
@import "bootstrap-theme";

就像我说的那样,当我在浏览器中将其拉出时,我在 application.scss 文件中看到了它,但它在页面上不起作用。这是我的页面 View 中的链接...

<%= stylesheet_link_tag    "application", media: 'all', "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "rails.validations", "data-turbolinks-track" => true %> 

我注意到在源代码上它首先显示 turbolinks 而不是链接 href... 到 application.css 文件。我错过了什么?

--更新--

但是我注意到,如果我将 css 的调用更改为手动添加每个 css,那么它就会出现在源代码中,

<%= stylesheet_link_tag    "application", "hover", media: 'all', "data-turbolinks-track" => true %>

页面源代码变为...

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/hover.css?body=1" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>  
etc...

那么为什么当我只调用 application.scss 时它没有将 css 文件放在一起?

最佳答案

你有没有像这样在 application.rb 文件中加载 vendor 库:-

config.assets.paths << Rails.root.join('vendor', 'assets')

然后在你的 application.css.scss 中要求这些:

@import "external_library/contents";

关于javascript - css 文件不加载 application.scss,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33931985/

相关文章:

javascript - 我怎样才能轻松提取数据扩展网址?

javascript - 如何从异步调用返回响应?

css - 在多个 parent 中选择第 n 个 child

html - 在下面的 div 上重叠多个 div

javascript - JQuery 键盘 css 将颜色分配给具有特定类的按钮(键)失败

javascript - 两个 float 相除的安全方法?

javascript - 删除事件监听器不工作

javascript - 在 JavaScript 中哪里添加可见性切换?

javascript - 取消选中所有(自动生成的)复选框

javascript - 使用 JS/jQuery 获取位置固定的元素