Aurelia 少支持

Question

使用 Aurelia 时，我看到 CSS 以下内容。

import 'bootstrap/css/bootstrap.css!';

我的问题是，您可以将其配置为支持更少的文件吗？或者我们是否需要单独运行预处理器，首先将我们的 less 文件转换为 css 文件？

提前致谢。

Answer 1

我认为你的问题很宽泛，答案取决于你选择的解决方案。

get started page of Aerelia shows you how to integrate Bootstrap using jspm. Some source 1, 2 建议在 github 上分叉 Bootstrap 存储库，并使用这个定制的分叉而不是带有 jspm 的原始分叉。在项目的 package.json 文件中，将 Bootstrap 替换为您自己在 jspm 依赖项中的分支，或运行:

jspm install github:{username}/bootstrap@master

从长远来看，我预计上述内容会给您带来麻烦，无法让您的叉子保持最新状态。此外，您还必须编译 Bootstrap（本地）并将每次更改都推送到 github。

或者您确实可以下载 Bootstrap 并将 Less 编译任务添加到项目的 gulp 构建任务中。正如@matthew-james-davis 在评论中已经建议的那样，您可以使用来了解如何执行此操作。

我建议使用bower本地安装Bootstrap:

bower install bootstrap

以上将在bower_components/bootstrap文件夹中安装bootstrap。不要直接修改这些文件。创建一个 less/project.less:

@import "bootstrap";
// your custom code here

请注意，编译 Bootstrap 也需要自动前缀 css 处理器。另见：http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/

所以你 gulp 构建任务应该如下所示：

var LessPluginCleanCSS = require('less-plugin-clean-css'),
    LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    cleancss = new LessPluginCleanCSS({ advanced: true }),
    autoprefix= new LessPluginAutoPrefix({ browsers: ["Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"] });

gulp.task('build-less', function() {
    gulp.src('less/project.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix, cleancss],
            paths: [ path.join(__dirname, 'bower_components/bootstrap/less/') ]
         }))
        .pipe(sourcemaps.write(paths.sourceMapRelativePath))
        .pipe(gulp.dest('css/'))
});

上面的任务应该编译 css/project.css 你可以在你的项目 index.html 中引用这个文件:

<link rel="stylesheet" type="text/css" href="css/project.css">

您还必须加载 Bootstrap Javascripts 插件。这些插件依赖于 jQuery。 Link bootstrap.min.js 来自您的 bower_component 文件夹。

Aurelia 少支持

Aurelia Less Support

less

aurelia