如何使用jspm和bootstrap-sass构建bootstrap
我刚刚开始深入研究SASS，并试图弄清楚如何从与jspm一起安装的bootstrap-sass模块构建bootstrap作为“开发依赖”-我不确定这是否正确。
我从ruby gem安装了sass。由于我使用的是jspm，我是否需要安装gulp并创建一个gulp任务，或者jspm应该为我处理所有的事情？
如果需要吞咽，它将如何与jspm包管理一起工作？
我必须承认，所有这些交叉都有点令人困惑。:)
更新:以下步骤
我删除了bootstrap-sass的JSPM版本(因为运行gulp任务会导致缺少bootstrap-mincer的错误)，而是从npm安装
npm install bootstrap-sass --save-dev
因为我仍然需要bootstrap javascript，所以我通过JSPM安装：
jspm install bootstrap
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var SASS_PATH = "./node_modules/bootstrap-sass/assets/stylesheets/**/*.scss";
gulp.task('sass', function () {
return gulp.src(SASS_PATH)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/styles/'));
});
gulp.task('sass:watch', function () {
gulp.watch(SASS_PATH, ['sass']);
});
gulp.task('default', function() {
// place code for your default task here
});运行任务不会在./public/styles中产生任何输出
$ gulp sass
[18:52:30] Using gulpfile ~/path_to_project/gulpfile.js
[18:52:30] Starting 'sass'...
[18:52:30] Finished 'sass' after 37 ms如果我可以让gulp任务工作，那么我就可以从JSPM的System.js加载bootstrap.js，并独立地加载css。
回答 2
Stack Overflow用户
发布于 2016-02-18 18:23:57
Gulp应该从NPM安装，因为它是一个构建任务。
Ruby不是强制性的。现在可以使用node-sass而不是ruby sass：
https://npmjs.org/package/node-sas
npm install node-sass --save-dev并使用gulp sass任务：
https://github.com/dlmanning/gulp-sass
npm install gulp --save-dev
npm install gulp-sass --save-dev(请注意，gulp-sass节点模块已经包含node-sass节点模块作为依赖项，因此不需要安装node-sass )
然后在gulpfile中添加sass任务
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});Stack Overflow用户
发布于 2016-05-11 05:02:34
我会运行npm命令来安装构建工具：
npm install jspm --save-dev
npm install gulp --save-dev
npm install gulp-sass --save-dev然后是用于安装依赖项的jspm命令：
jspm install bootstrap-sass然后在你的gulpfile.js中
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('watch', function () {
gulp.watch('./src/**/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);在您的all.scss中：
// shared across all components
$icon-font-path: "../../jspm_packages/github/twbs/bootstrap-sass@3.3.6/assets/fonts/bootstrap/";
@import "../../jspm_packages/github/twbs/bootstrap-sass@3.3.6/assets/stylesheets/bootstrap-sprockets";
@import "../../jspm_packages/github/twbs/bootstrap-sass@3.3.6/assets/stylesheets/bootstrap";
// components
@import './header/header';然后运行你的吞咽任务：
gulphttps://stackoverflow.com/questions/35423709
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号