Question

我一直在竭尽全力将scss文件编译成CSS。

我很少使用gulp和sass，并且该特定框架的文档在此问题上没有帮助。

我的gulpfile看起来像这样

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

var scssFile='assets/scss/bootstrap-material-design.scss';
gulp.task('sass', function () {
  return gulp.src(scssFile)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('_site/assets/css'));
});

我做了npm install gulp gulp-sass --save-dev来安装库。
然后，我将此文件夹https://github.com/FezVrasta/bootstrap-material-design/tree/master/scss的内容复制到名为“ scss”的文件夹中

现在运行gulp sass会给我这个错误：

[13:54:37]使用gulpfile〜/ workspace / imb4 / gulpfile.js
  [13:54:37]开始“混蛋” ...
  插件“ sass”中的错误
  讯息：
      资产/scss/_variables.scss
  错误：找不到导入文件或不可读：〜bootstrap / scss / functions。
          在asset / scss / _variables.scss的第56行上
          从asset / scss / _core.scss的第2行开始
          从资产/scss/bootstrap-material-design.scss的第3行开始
  >> @import“〜bootstrap / scss / functions”; //来自bootstrap node_module
     ^
  [13:54:37] 50毫秒后完成“骚扰”

这是因为我复制了错误的scss文件夹吗？

我需要npm install bootstrap-material-design@4.1.1吗？（我确实尝试过，但是我不能require()，因为它需要jQuery之类的东西。）

我需要引用node_modules中的scss文件吗？

错误表明它需要一个bootstrap文件夹，我是否需要手动下载bootstrap scss文件并将其复制到该文件夹中？我需要做npm install bootstrap吗？

这可能是一个愚蠢的问题，但是我已经被这个问题困扰了几个小时了。

Answer 1

将链接中的文件夹原样复制到资产/ scss

您的gulp文件应将您的主条目sass文件命名为style.scss-在您的情况下为“ bootstrap-material-design.scss”

此sass文件仅包含一个导入-@import“ core”;

_core导入_variables.scss，_mixins.scss等...

您的_variables.scss文件具有

@import "~bootstrap/scss/functions"; // from bootstrap node_module
@import "~bootstrap/scss/variables"; // from bootstrap node_module

因此，它正在寻找一个node_modules / bootstrap文件夹，

npm install bootstrap

将其添加。

当您运行gulp任务并且sass开始编译时，它需要位于node_modules / bootstrap / scss /文件夹中的完整引导文件才能正确编译。

您的“ bootstrap-material-design.scss”将首先导入_core，然后_core将导入_variables，_variables从scss目录内的另一个变量文件夹导入一些自定义文件，然后再使用以下命令查看node_modules文件夹（第56行）： @import“〜bootstrap / scss / functions”;

您的gulp任务将获取您的sass文件引用（在构建时会编译带下划线的任何内容）-随便放出一个纯CSS文件，无论您将目标设置为例如“ assets / css / style.css”构建后应该在html中引用该文件。

如果您仍然没有遇到这种情况，则可能只是一个简单的路径问题需要解决。 bootstrap的版本在sass fodler的结构上可能会有所不同，因此请仔细检查node_modules / bootstrap / scss /中的路径，实际上有一个functions文件夹。

如果确实尝试@import“ ./node_modules/bootstrap/functions”;

如果没有，则可能需要检查引导程序的版本。

例如-在Bootstrap 4.1.1中，它们是导入而不是文件夹 @import'〜bootstrap / scss / _functions'; @import'〜bootstrap / scss / _variables';

如何用gulp编译bootstrap-material-design sass文件？

1 个答案: