twitter-bootstrap-3 – 在Phoenix Framework中集成Bootstrap主

您需要在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中的web / static / 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
  }
};