title: How to import packages within my Aurelia application
body: <p>I have a successful app running using Aurelia, however I developed it using VSCode and the skeleton that Aurelia gives you. Now that the CLI is available I'm trying to port the application over to a VS2015/Asp.net Core project but I'm having some difficulties. </p>
  
  <p>In the VSCode project, there's a bundles.js file within the build folder that Gulp uses to compile it (from what I understand). In that file, there's a "dist/aurelia" section and that's where I put all of the extra packages that I need to import and it will import the css and js files. Looks like this:</p>
  
  <pre><code>"dist/aurelia": {
        "includes": [
          "aurelia-framework",
          "aurelia-bootstrapper",
          "aurelia-fetch-client",
          "aurelia-router",
          "aurelia-animator-css",
          "aurelia-templating-binding",
          "aurelia-polyfills",
          "aurelia-templating-resources",
          "aurelia-templating-router",
          "aurelia-loader-default",
          "aurelia-history-browser",
          "aurelia-logging-console",
          "bootstrap",
          "bootstrap/css/bootstrap.css!text",
          "fetch",
          "jquery",
          "rstacruz/nprogress",
          "moment",
          "systemjs/plugin-text/*.js",
          "components/jqueryui",
          "quilljs",
          "rich-text",
          "util",
          "signalr"
        ],
        "options": {
          "inject": true,
          "minify": true,
          "depCache": false,
          "rev": false
        }
      }
  </code></pre>
  
  <p>However, when I use the command <code>au new --here</code> to create a new project within VS2015, the generated project looks a little different. I have an aurelia_project folder and within that it looks like that's where all of the building/compiling happens. In that folder, there's an aurelia.json file and that's where I need to put all of the packages (I'm using NPM btw) I've been told. When I try to import these packages, it appends .js to the file path automatically and totally leaves out CSS so it's failing to load my CSS when the page loads. Here's what the aurelia.json looks like:</p>
  
  <pre><code>"dependencies": [
            "aurelia-binding",
            "aurelia-bootstrapper",
            "aurelia-dependency-injection",
            "aurelia-event-aggregator",
            "aurelia-framework",
            "aurelia-history",
            "aurelia-history-browser",
            "aurelia-loader",
            "aurelia-loader-default",
            "aurelia-logging",
            "aurelia-logging-console",
            "aurelia-metadata",
            "aurelia-pal",
            "aurelia-pal-browser",
            "aurelia-path",
            "aurelia-polyfills",
            "aurelia-route-recognizer",
            "aurelia-router",
            "aurelia-task-queue",
            "aurelia-templating",
            "aurelia-templating-binding",
            {
              "name": "text",
              "path": "../wwwroot\\scripts/text"
            },
            {
              "name": "aurelia-templating-resources",
              "path": "../node_modules/aurelia-templating-resources/dist/amd",
              "main": "aurelia-templating-resources"
            },
            {
              "name": "aurelia-templating-router",
              "path": "../node_modules/aurelia-templating-router/dist/amd",
              "main": "aurelia-templating-router"
            },
            {
              "name": "aurelia-testing",
              "path": "../node_modules/aurelia-testing/dist/amd",
              "main": "aurelia-testing",
              "env": "dev"
            },
            {
              "name": "jquery",
              "path": "../node_modules/jquery/dist/jquery.min"
            },
            {
              "name": "bootstrap",
              "path": "../node_modules/bootstrap/dist/js/",
              "main": "bootstrap"
            }
          ]
        }
  </code></pre>
  
  <p>So, I'm my VSCode project, I imported bootstrap css on the html page via a require tag. Is that still the proper way to do things? If so, how do I fix this importing issue?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The answer below helped be get a bit further. Now the project builds and runs without any errors however, I can't seem to get the bootstrap css imported correctly.</p>
  
  <p>Here's a snippet of my new aurelia.json file:</p>
  
  <pre><code>{
              "name": "aurelia-testing",
              "path": "../node_modules/aurelia-testing/dist/amd",
              "main": "aurelia-testing",
              "env": "dev"
            },
            "jquery",
            {
              "name": "bootstrap",
              "path": "../node_modules/bootstrap/dist/js",
              "main": "bootstrap",
              "resources": [
                "../css/*.css"
              ]
            }
  </code></pre>
  
  <p>So this is adding the css file into the bootstrap package. Now, in my typescript file, I'm calling <code>import 'jquery'</code> and <code>import 'bootstrap'</code> and I don't get any css still. Not sure how to fix this.</p>