css - 如何有效地使用 bootstrap-sass？

Question

我目前正在使用 npm 发现模块，然后我开始使用 bootstrap-sass .现在模块已下载，我正在寻找将 scss 编译到应用程序的静态文件夹以及 js Bootstrap 文件中的解决方案。

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

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

编辑:

目前，我使用以下脚本/文件:

"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 的构建工具是使用此模块的先决条件。虽然它不再是棚子里最 Shiny 的工具，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，它可以在我的机器上运行，但是如果您决定尝试这种方法，请随时询问是否有什么地方会引发错误。祝你的元素好运。