加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap – 在Ember.JS ember-cli应用程序中包含引导

发布时间:2020-12-17 23:41:48 所属栏目:安全 来源:网络整理
导读:我试图在我当前的ember-cli项目中正确安装Twitter Bootstrap。 我用bower安装bootstrap: bower install --save bootstrap 现在的库被下载在/ vendor / bootstrap / dist /(css | js | fonts) 我试过这里提到的:http://ember-cli.com/#managing-dependencie
我试图在我当前的ember-cli项目中正确安装Twitter Bootstrap。
我用bower安装bootstrap:
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');

但它没有工作。文件可见true dev服务器:http:// localhost:4200 / assets / bootstrap.css

有人可以在这里扔我一个骨头吗?

谢谢

编辑:

ember -v
ember-cli 0.0.23

brocfile.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',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',destDir: '/tests'
    });

    var qunitStyles = pickFiles('vendor',{
      srcDir: '/qunit/qunit',files: ['qunit.css'],destDir: '/assets/'
    });

    testsIndexHTML = replace(testsIndexHTML,{
      files: ['tests/index.html'],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'
      ],wrapInEval: true,outputFile: '/assets/tests.js'
    });

    var testsTrees = [qunitStyles,testsIndexHTML,validatedJs,testsJs];
    outputTrees = outputTrees.concat(testsTrees);
  }

  return mergeTrees(outputTrees,{ overwrite: true });
};

解决方法

您可能希望查看 ember-bootstrap,这将自动导入引导资产。
ember install ember-bootstrap

此外,它为您的应用程序添加了一套原生的ember组件,使得在ember中更容易使用bootstrap功能。检查出来,虽然我有点偏见,因为我是它的作者!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读