[解決済み] Ember.JS ember-cli アプリでブートストラップライブラリをインクルードする推奨方法
質問
現在使用しているember-cliプロジェクトに、Twitter Bootstrapを正しくインストールしようとしています。 私はbowerでブートストラップをインストールしました。
bower install --save bootstrap
これで、ライブラリは /vendor/bootstrap/dist/(css|js|fonts) にあります。 私はここに記載されていることを試してみました。 http://ember-cli.com/#managing-dependencies パスとCSSファイル名を置き換えてみましたが Brocfile.js というファイルがあります。Brocfileのフォーマットが例と比べて変わりすぎているのだと思います。
また、@importに /app/styles/app.cssとしました。 というファイルを作成し、/app/styles/ ディレクトリにあるスタイルシートを移動してみました。
@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');
しかし、うまくいきませんでした。ファイルは、真の開発サーバーを見ることができます。
http://localhost:4200/assets/bootstrap.css
誰かここに骨を投げてくれませんか?
ありがとうございます。
編集する。
ember -v
ember-cli 0.0.23
ブロクファイル.js
/* global require, module */
var uglifyJavaScript = require('broccoli-uglify-js');
var replace = require('broccoli-replace');
var compileES6 = require('broccoli-es6-concatenator');
var validateES6 = require('broccoli-es6-import-validate');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');
var env = require('broccoli-env').getEnv();
var getEnvJSON = require('./config/environment');
var p = require('ember-cli/lib/preprocessors');
var preprocessCss = p.preprocessCss;
var preprocessTemplates = p.preprocessTemplates;
var preprocessJs = p.preprocessJs;
module.exports = function (broccoli) {
var prefix = 'caisse';
var rootURL = '/';
// index.html
var indexHTML = pickFiles('app', {
srcDir: '/',
files: ['index.html'],
destDir: '/'
});
indexHTML = replace(indexHTML, {
files: ['index.html'],
patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
});
// sourceTrees, appAndDependencies for CSS and JavaScript
var app = pickFiles('app', {
srcDir: '/',
destDir: prefix
});
app = preprocessTemplates(app);
var config = pickFiles('config', { // Don't pick anything, just watch config folder
srcDir: '/',
files: [],
destDir: '/'
});
var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees());
var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });
// JavaScript
var legacyFilesToAppend = [
'jquery.js',
'handlebars.js',
'ember.js',
'ic-ajax/dist/named-amd/main.js',
'ember-data.js',
'ember-resolver.js',
'ember-shim.js',
'bootstrap/dist/js/bootstrap.js'
];
var applicationJs = preprocessJs(appAndDependencies, '/', prefix);
applicationJs = compileES6(applicationJs, {
loaderFile: 'loader/loader.js',
ignoredModules: [
'ember/resolver',
'ic-ajax'
],
inputFiles: [
prefix + '/**/*.js'
],
legacyFilesToAppend: legacyFilesToAppend,
wrapInEval: env !== 'production',
outputFile: '/assets/app.js'
});
if (env === 'production') {
applicationJs = uglifyJavaScript(applicationJs, {
mangle: false,
compress: false
});
}
// Styles
var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');
// Bootstrap Style integration
var bootstrap = pickFiles('vendor', {
srcDir: '/bootstrap/dist/css',
files: [
'bootstrap.css',
'bootstrap-theme.css'
],
destDir: '/assets/'
});
//var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets');
// Ouput
var outputTrees = [
indexHTML,
applicationJs,
'public',
styles,
bootstrap
];
// Testing
if (env !== 'production') {
var tests = pickFiles('tests', {
srcDir: '/',
destDir: prefix + '/tests'
});
var testsIndexHTML = pickFiles('tests', {
srcDir: '/',
files: ['index.html'],
destDir: '/tests'
});
var qunitStyles = pickFiles('vendor', {
srcDir: '/qunit/qunit',
files: ['qunit.css'],
destDir: '/assets/'
});
testsIndexHTML = replace(testsIndexHTML, {
files: ['tests/index.html'],
patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
});
tests = preprocessTemplates(tests);
sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees());
appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });
var testsJs = preprocessJs(appAndDependencies, '/', prefix);
var validatedJs = validateES6(mergeTrees([app, tests]), {
whitelist: {
'ember/resolver': ['default'],
'ember-qunit': [
'globalize',
'moduleFor',
'moduleForComponent',
'moduleForModel',
'test',
'setResolver'
]
}
});
var legacyTestFiles = [
'qunit/qunit/qunit.js',
'qunit-shim.js',
'ember-qunit/dist/named-amd/main.js'
];
legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles);
testsJs = compileES6(testsJs, {
// Temporary workaround for
// https://github.com/joliss/broccoli-es6-concatenator/issues/9
loaderFile: '_loader.js',
ignoredModules: [
'ember/resolver',
'ember-qunit'
],
inputFiles: [
prefix + '/**/*.js'
],
legacyFilesToAppend: legacyFilesToAppend,
wrapInEval: true,
outputFile: '/assets/tests.js'
});
var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs];
outputTrees = outputTrees.concat(testsTrees);
}
return mergeTrees(outputTrees, { overwrite: true });
};
どのように解決するのですか?
以下のサイトをご覧ください。 エンバーブートストラップ をチェックすると良いでしょう。これはブートストラップアセットを自動的にインポートします。
ember install ember-bootstrap
さらに、emberのネイティブコンポーネントのスイートをアプリに追加し、emberでbootstrapの機能をより簡単に使えるようにします。
さらに、emberのネイティブコンポーネントを追加することで、emberでbootstrapの機能をより簡単に使えるようになります。)
関連
-
[解決済み] bootstrapでpanel-bodyの背景色を変更するには?
-
[解決済み] Bootstrap:Bootstrapのバージョンを識別する方法は?
-
[解決済み] angular 2でbootstrap 4を使用するには?
-
[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか?
-
[解決済み】リストセレクトボックス(ドロップダウン)をbootstrapでレンダリングする方法は?
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] bootstrapのtabindex="-1 "は何のためにあるのか?
-
[解決済み] なぜTwitter Bootstrapはフォントサイズにピクセルを使用するのですか?
-
[解決済み] Twitter Bootstrapの<hr>タグが正しく機能しない?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Twitter bootstrapのモーダルバックドロップが消えない件
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] TwitterのPopoverでdivをコンテンツとして使用することは可能ですか?
-
[解決済み] bowerでbootstrapを使用する
-
[解決済み] Bootstrapでテーブルの行をソートする [終了しました]。
-
[解決済み] BootstrapでScrollSpyのオフセットを設定するにはどうすればよいですか?
-
[解決済み] Bootstrap。1つのセクションを展開すると他のセクションが折りたたまれる