我一直在建立一个流星应用程序,并决定放弃它,以支持凤凰.我遇到的问题是尝试将预制的Bootstrap主题与我的应用程序集成.我需要能够控制CSS,Sass和
JavaScript的加载顺序.在Meteor中,您将加载顺序放在package.json文件中,并为其构建自定义包.此外,您不必在HTML中包含import语句.所以我的具体问题是:
如何控制文件的加载顺序?
所有的JavaScript,CSS,Sass和图像文件应该放在哪里? (我在静态供应商目录中猜?)
我确实需要在HTML文件中包含import语句吗?
这个主题相当大,有一堆JavaScript文件,字体很棒,Bootstrap CSS,自定义CSS,Sass,图像和厨房水槽.
解决方法
在凤凰城,这可以这样完成:
您需要在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 } };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。