css - 如何在我的 Aurelia 应用程序中导入包

Question

我有一个使用 Aurelia 运行的成功应用程序，但是我使用 VSCode 和 Aurelia 为您提供的框架开发了它。现在 CLI 可用，我正在尝试将应用程序移植到 VS2015/Asp.net Core 元素，但我遇到了一些困难。

在 VSCode 元素中，build 文件夹中有一个 bundles.js 文件，Gulp 用来编译它(据我所知)。在该文件中，有一个“dist/aurelia”部分，这是我放置所有需要导入的额外包的地方，它将导入 css 和 js 文件。看起来像这样:

"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
      }
    }

但是，当我使用命令 au new --here 在 VS2015 中创建一个新元素时，生成的元素看起来有点不同。我有一个 aurelia_project 文件夹，它看起来像是所有构建/编译发生的地方。在那个文件夹中，有一个 aurelia.json 文件，这是我需要放置所有包的地方(我正在使用 NPM 顺便说一句)我被告知。当我尝试导入这些包时，它会自动将 .js 附加到文件路径并完全忽略 CSS，因此它无法在页面加载时加载我的 CSS。这是 aurelia.json 的样子:

"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"
          }
        ]
      }

所以，我是我的 VSCode 元素，我通过 require 标签在 html 页面上导入了 bootstrap css。那仍然是做事的正确方法吗？如果是这样，我该如何解决这个导入问题？

编辑

下面的答案有助于更进一步。现在元素构建和运行没有任何错误，但是我似乎无法正确导入 bootstrap css。

这是我的新 aurelia.json 文件的片段:

{
            "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"
            ]
          }

所以这是将 css 文件添加到 Bootstrap 包中。现在，在我的 typescript 文件中，我正在调用 import 'jquery' 和 import 'bootstrap' 并且我仍然没有得到任何 css。不确定如何解决这个问题。

Answer 1

发生的情况是 aurelia skeleton-esnext 使用 SystemJS，而 Aurelia-CLI 使用 RequireJS(不久的将来 CLI 将支持 SystemJS 和 WebPack)。 SystemJS 和 RequireJS 是模块加载器，它们的行为略有不同。这就是为什么您有 2 种不同的方法来配置模块。

此链接显示如何配置具有 css 文件的库: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/9

"dependencies": [
  ...
  {
    "name": "nprogress",
    "path": "../node_modules/nprogress",
    "main": "nprogress",
    "resources": [
      "nprogress.css"
    ]
  }
  ...
]

上面的代码告诉 RequireJS 把 nprogress.css在捆绑文件中。但是，它没有说明何时何地导入/需要 css 文件，因此您必须在您的应用程序中导入/需要它。使用 <require from="nprogress/nprogress.css"></require>在您看来，或使用 import 'nprogress/nprogress.css';在你的 View 模型中。

当您使用 SystemJS 时，您不必导入一些 css 文件，因为 JSPM 可以检测到一些依赖项并生成一个特殊的语法来告诉 SystemJS 加载 CSS 文件。例如，当您安装 nprogress使用 JSPM，它生成以下文件:

/* */ 
"format global";
"deps ./nprogress.css!";
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

;(function(root, factory) {
///....

行“deps ./nprogress.css!”；告诉 SystemJS 自动导入/要求 nprogress.css当你加载模块时。因此，您不必在 View 或 View 模型中导入/要求 css 文件。

希望这对您有所帮助!