如何有效地使用 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，它可以在我的机器上运行，但是如果您决定尝试这种方法，请随时询问是否有什么东西引发了错误。祝你的项目好运。