如何有效地使用bootstrap-sass？

Question

我目前正在使用npm查找模块，然后去使用bootstrap-sass 。 现在已经下载了模块，我正在寻找一种将scss编译到应用程序的静态文件夹中以及js引导程序文件中的解决方案。

但是根据模块的npmjs文档，我找不到一个简单的解决方案，它不是自己移动js文件，而是使用诸如node-sass之类的东西从node_modules编译scss引导文件。

正确使用此模块并可以自定义的最简单方法是什么？

编辑：

现在，我正在使用以下脚本/文件：

"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"

app.scss

@import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

main.js

global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');

Answer 1

我以前从未使用过bootstrap-sass ，但是文档暗示使用预处理工具构建SCSS是使用此模块的先决条件。 尽管它不再是棚中最闪亮的工具，但Gulp仍然能够处理此任务，并能够将文件从node_modules移至项目根目录。

以下是实现此目的的一种方法的细分：

1. 在项目根目录中创建三个子文件夹，并将其命名为sass ， css和javascript 。
2. 在sass文件夹中创建一个文件，并将其app.scss 。 打开并粘贴： @import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss'; 。 将文件转换为CSS后，所有的Bootstrap模块都将在那里。 在第1行的@import语句下，可以随时编写所需的任何样式规则。
3. 假设您已经运行npm init并在项目目录中包含package.json文件，请在终端中运行npm install gulp -D 。 这将安装gulp（我选择的任务运行器！）。
4. 运行npm install gulp-sass --save-dev 。 这将安装gulp插件，该插件会将Bootstrap SASS预处理为CSS。
5. 在您的根目录（而不是任何子文件夹）中创建一个文件gulpfile.js
6. 复制此文本并将其粘贴到gulpfile.js ：

（注意：要使其正常工作，除非您在以下代码中更改其名称，否则您的SASS和CSS文件夹必须分别称为sass和css 。）

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass-to-css', function () {
    return gulp.src('./sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('javascript', function () {
    return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
        .pipe(gulp.dest('./javascript'));
});

gulp.task('default', ['sass-to-css', 'javascript']);

最后，运行命令gulp在终端执行gulpfile，这将做两件事情：

1. 预处理所有SASS并将其移到您的css文件夹中。
2. 将bootstrap.min.js从node_modules复制到项目的javascript文件夹中。

当然，不要忘记在HTML中链接到这些资产。

我即时提取了这个gulpfile，它可以在我的机器上运行，但是如果您决定尝试这种方法，请随时询问是否有任何错误。 祝您项目顺利。