Css 如何有效地使用引导sass？

我目前正在使用npm发现模块，并开始使用。现在模块已经下载，我正在寻找一种解决方案，将SCS编译到应用程序的静态文件夹中，以及js引导文件中

但是根据npmjs的模块文档，我找不到一个简单的解决方案，那就是不自己移动js文件，并用node sass之类的东西从node_模块编译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

main.js

---

我以前从未使用过

bootstrap sass

，但文档表明，预处理scs的构建工具是使用此模块的先决条件。虽然它不再是shed中最闪亮的工具，但它非常能够处理此任务，并将文件从

node\u模块

移动到您的项目根目录

下面是实现此功能的一种方法的分解：

在项目根目录中创建三个子文件夹，并将它们称为

sass

、

css

和

javascript

在

sass

文件夹中创建一个文件，并将其命名为

app.scss

。打开它并粘贴以下内容：

@import./node_modules/bootstrap sass/assets/stylesheets/_bootstrap.scss'。当文件被转换成CSS时，所有的引导模块都会在那里。在第1行的
@import
语句下面，您可以随意编写任何样式规则

假设您已经运行了

npm init

，并且在项目目录中有一个

package.json

文件，请在终端中运行

npm install gulp-D

。这将安装gulp（我选择的任务运行程序！）

运行

npm安装gulp-sass——保存开发文件
。这将安装gulp插件，该插件将引导SASS预处理为CSS

在根目录（而不是任何子文件夹）中创建一个名为

gulpfile.js的文件

将此文本复制并粘贴到

gulpfile.js

：

（注意：要使其工作，您的SASS和CSS文件夹必须分别被称为

SASS

和

CSS

，除非您在以下代码中更改它们的名称。）

最后，在终端中运行命令

gulp

，以执行gulpfile，这将完成两件事：

预处理并将所有SAS移动到

css

文件夹中

将

bootstrap.min.js

从

node\u modules

复制到项目的

javascript

文件夹中

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

我在飞行中快速创建了这个gulpfile，它在我的机器上工作，但是如果你决定尝试这种方法，那么请随意询问是否有东西抛出错误。祝你的项目好运

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

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

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']);