Question

我正在尝试设置Atom编辑器，Sass，Typescript和Aurelia的连接。我猜这个问题是关于Aurelia（通过aurelia-cli安装）及其构建系统。

好吧，我为我的组件编写了style.sass，然后我在组件的视图（例如app.html）中将它作为style.css。很好，它的工作原理。但是编译后的style.css的内容作为内部样式包含在index.html中，我的意思是所有内容都在<style> - 标记内，而不是<link>。此外，似乎永远不会创建相应的.css文件。该流只是将其内容包含在<style> - index.html内的标记中。

我如何通过<link>让Aurelia将我的样式作为外部样式包含在内？在构建任务时，最后一个动作是来自aurelia-cli的构建插件，对我来说这是一个黑盒子。此外，还导入了aurelia.json，因此应该有一种方法来配置所需的行为。快速搜索没有给我答案，所以我在这里。

Answer 1

这可能不是最好的解决方案，并不完全是你想要的，但也许它会有所帮助。您可以执行以下操作（我使用了一个新的TypeScript项目）：

首先从您的视图中删除css包含。

然后，按如下方式调整./aurelia_project/tasks/process-css.ts任务：

import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(project.platform.output));
};

这将在./scripts文件夹中输出CSS文件。然后，按如下方式调整aurelia_project/aurelia.json文件（删除css）：

  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{html}"
    ]
  },

在index.html中，您现在可以包含生成的样式（甚至可以包含在组件视图中）。

我怎么能通过<link />让Aurelia将我的风格作为外部风格包括在内？

1 个答案: