1

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

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

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

提前致谢。

4

1 回答 1

3

我认为您的问题非常广泛，答案取决于您选择的解决方案。

Aerelia的入门页面向您展示了如何使用 jspm 集成 Bootstrap。一些来源1、2建议在 github 上分叉 Bootstrap 存储库，并使用这个定制的 fork 而不是原来的 jspm。在package.json您的项目文件中，用您自己的 jspm 依赖项中的 fork 替换 Bootstrap，或运行：

jspm install github:{username}/bootstrap@master

从长远来看，我希望以上内容会给您带来麻烦，让您的前叉保持最新状态。此外，您必须编译 Bootstrap（本地）并将您的更改推送到 github 以进行每次更改。

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

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

bower install bootstrap

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

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

请注意，编译 Bootstrap 也需要 autoprefix 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。bootstrap.min.js从您的 bower_component 文件夹链接。

于 2015-04-26T20:45:36.063 回答