在Phoenix Framework中集成Bootstrap主题

Question

我一直在建立一个流星应用程序,并决定放弃它,以支持凤凰.我遇到的问题是尝试将预制的Bootstrap主题与我的应用程序集成.我需要能够控制CSS,Sass和JavaScript的加载顺序.在Meteor中,您将加载顺序放在package.json文件中,并为其构建自定义包.此外,您不必在HTML中包含import语句.所以我的具体问题是:

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

所有的JavaScript,CSS,Sass和图像文件应该放在哪里？(我在静态供应商目录中猜？)

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

这个主题相当大,有一堆JavaScript文件,字体很棒,Bootstrap CSS,自定义CSS,Sass,图像和厨房水槽.

Answer 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"
  }
}

现在,你会改变app.css位于网页/静态/ CSS/app.css文件app.scss.从这里导入所有的css/sass文件(我个人将引导程序添加到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
  }
};