Question

这是我第一次手动将bootstrap放在一起。我一直在使用JHipster，它现在可用于盒子。这个项目需要一些配置，它给了我一些问题。

我使用以下命令下载了我需要的内容：

bower -g install
npm -g install
brew install gulp serve

我从http://startangular.com/获得了模板。但它不起作用，我只想弄清楚如何将它们连接在一起。

main.less

@import "less/bootstrap.less";

// Base
@import "base.less";

// Pages
@import "pages/login.less";
@import "pages/dashboard.less";

//buttons
@import "less/buttons.less";

// Widgets and Effects
@import "widgets/input-underline.less";
@import "../../bower_components/bootstrap-btn-outline-rounded/index.less";
@import "transitions/all.less";

// Other
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

html,body {
    overflow: hidden;
}

index.html

  <html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Ani AngularJS Dashboard Theme</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
     <!--Place favicon.ico and apple-touch-icon.png in the root directory-->
     <!--build:css(.) styles/vendor.css-->
     <!--bower:css-->
     <!--endbower-->
     <!--endbuild-->
     <!--build:css(.tmp) styles/main.css-->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="yapp">

    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div>
      <div ui-view></div>
    </div>

    <h2>Hello World</h2>

    <button type="button" class="btn btn-success btn-rounded">Success Button</button>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script> /*
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview'); *
    </script>

    <!-- build:js scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="../bower_components/es5-shim/es5-shim.js"></script>
    <script src="../bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-mocks/angular-mocks.js"></script>
    <script src="../bower_components/ui-router/release/angular-ui-router.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/login.js"></script>
    <script src="scripts/controllers/dashboard.js"></script>
    <!-- endbuild -->
  </body>
</html>

上面的按钮看起来像是：

然而它看起来像：

oddy我的IDE（intellij）说：

但是，如果我把main.less放入，我会收到错误：

localhost/:14 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8888/ani-theme-master/app/styles/main.less".

我知道＆＃39; less＆＃39;有一个编译器将其编译成css但是我在这里缺少一些东西。

么？

Bootstrap，少了不工作

0 个答案: