在 Phoenix 框架中集成 Bootstrap 主题答案

【问题标题】：Integrate Bootstrap Theme in Phoenix Framework在 Phoenix 框架中集成 Bootstrap 主题
【发布时间】：2016-04-24 21:49:54
【问题描述】：

我一直在构建 Meteor 应用程序，并决定放弃它，转而使用 phoenix。我遇到的问题是尝试将预制的 Bootstrap 主题与我的应用程序集成。我需要能够控制 CSS、Sass 和 JavaScript 的加载顺序。在 Meteor 中，您将加载顺序放在 package.json 文件中并为其构建自定义包。此外，您不必在 HTML 中包含导入语句。所以我的具体问题是：

如何控制文件的加载顺序？

所有的 JavaScript、CSS、Sass 和图像文件应该放在哪里？（我猜是在静态供应商目录中？）

我确实需要在 HTML 文件中包含导入语句正确吗？

这个主题非常大，包含一堆 JavaScript 文件、很棒的字体、Bootstrap CSS、自定义 CSS、Sass、图像和厨房水槽。

【问题讨论】：

标签： twitter-bootstrap-3 phoenix-framework

【解决方案1】：

在凤凰城可以这样完成：

您需要在 package.json 文件中包含 sass-brunch 包并运行 npm-install 例如

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.5",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

现在您将位于 web/static/css/app.css 的 app.css 文件更改为 app.scss。从这里导入所有的 css/sass 文件（我个人将 bootstrap 添加到 css web/static/vendor/css/bootstrap.scss 下的 vendor 文件夹）例如

@import "../vendor/css/bootstrap";

下一部分可能是您难以弄清楚的部分，因为我 =o)。您对 javascript 文件所做的就是在 brunch-config.js 文件中要求它们，如下所示：

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          "web/static/vendor/js/jquery.min.js",
          "web/static/vendor/js/bootstrap.min.js",
          "web/static/vendor/js/scripts.js"
        ]
      }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "deps/phoenix/web/static",
      "deps/phoenix_html/web/static",
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

【讨论】：

您确实在 html.eex 文件中包含导入语句和脚本 src 对吗？为了确保我有这个权利，我需要将 app.css 更改为 app.scss，在我的 brunch 配置中添加 scss 支持，将我所有的 css 和 scss 文件导入 app.scss，并将所有 css 和 js 文件放入供应商文件夹。听起来对吗？
没错ceero，通过这样做，您将能够按照主题需要导入文件的顺序导入它们。至于 html.eex 文件，您不需要单独导入或链接到文件，因为 phoenix 与 brunch 一起使用 brunch build 将所有文件编译并压缩为一个 css 和一个 js 文件。重新准备好投入生产，你会想要运行 mix phoenix.digest，它会为你消化你的资产。
这些文件已经链接到您的主布局文件 app.html.eex 文件中，该文件位于 web/templates/layout 中。
知道了。这就是我正在寻找的解释。 Phoenix 是否允许您根据路线使用多种布局？
它确实是 ceero，你可以在这里看到它是如何实现的 stackoverflow.com/questions/33399767/… 和这里 hexdocs.pm/phoenix/1.0.0/Phoenix.Controller.html#layout/1