将 CSS 文件添加到 Phoenix答案

【问题标题】：add CSS files to Phoenix将 CSS 文件添加到 Phoenix
【发布时间】：2018-07-21 02:04:37
【问题描述】：

我在布局文件夹中添加了一个 navbar.html.eex，这个模板是从 app.html.eex <%= render "navbar.html", conn: @conn, current_user: @current_user %> 渲染的

在 app.css 中：

@import 'navbar.css';

它应该指向我的文件：assets/css/navbar.css

但是文件没有加载，在我的浏览器控制台中我得到：GET http://localhost:4000/css/navbar.css net::ERR_ABORTED，出现 404 错误。

我来自 Rails 世界，这就是我以前的做法，但也许在 Phoenix 有另一种方法。我找不到关于在 Phoenix 中管理 css 文件的好文档，所以如果有人有一些读物要推荐！我将不胜感激！

【问题讨论】：

你把你的css资源放在哪里了？
它们都在 assets/css (Phoenix 1.3) 中
在web/static/assets 中？看看这里的文档：phoenixframework.org/blog/static-assets

标签： elixir phoenix-framework

【解决方案1】：

好的，所以在我阅读文档后，我意识到 Pheonix 使用早午餐并将 CSS 收集到 priv/static 中的一个大 app.css 文件中。不需要像在 Rails 中那样导入。

【讨论】：

【解决方案2】：

Phoenix 使用 Brunch 构建您的资产。默认情况下，它会将您的 /web/static/assets/ 目录中的所有内容复制到 /priv/static。查看Phoenix Static Assets 文档以获取更多信息。

【讨论】：

【解决方案3】：

这篇文章可能会帮助您进行配置。

https://elixirforum.com/t/boostrap-4-sass-installation-in-phoenix-1-3/10139?source_topic_id=10804

并有望解决您的问题。我在设置前端时遇到了同样的问题，它帮助了我

【讨论】：

【解决方案4】：

assets/css 中的所有 .css 文件都会自动导入。无需显式导入。

【讨论】：

【解决方案5】：

在 Phoenix 中，所有 css 文件都/应该存储在 priv\static\css 文件夹中。为了添加您的自定义 css，请将 css 文件添加到上面的文件夹中，然后前往 lib\foldername_web\templates\layout 并编辑位于那里的 app.html.eex 文件。您将在 head 标签之间看到一条线，如下所示：

&lt;link rel="stylesheet" href="&lt;%= Routes.static_path(@conn, "/css/app.css") %&gt;"/&gt;

编辑文本并将其重命名为您创建或添加的 css 文件，使该行看起来像这样。

&lt;link rel="stylesheet" href="&lt;%= Routes.static_path(@conn, "/css/my-css.css") %&gt;"/&gt;

您的页面现在应该看起来不一样了。我希望这会有所帮助。

【讨论】：