css - 使用 Gulp 将 Bootstrap-Material Scss 转换为 CSS 时找不到导入

Question

运行 gulp 任务样式后出现以下错误:

Error in plugin "sass"
Message:
    static\node_modules\bootstrap-material-design\scss\_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.        
on line 56 of static/node_modules/bootstrap-material-design/scss/_variables.scss
        from line 2 of static/node_modules/bootstrap-material- design/scss/_core.scss
        from line 3 of static/node_modules/bootstrap-material- design/scss/bootstrap-material-design.scss
@import "~bootstrap/scss/functions"; // from bootstrap node_module
 ^

我已经检查过文件是否在它应该查找的位置。所以我不确定出了什么问题。这是我的元素结构:

Project/
  gulpfile.js
  package.json
  package-lock.json
  node_modules/
    bootstrap/
    bootstrap-material-design/
    gulp-sass/
    gulp/
  static/
    node_modules/
        bootstrap/
           scss/
             _functions.scss
        bootstrap-material-design/
           scss/

        gulp-sass/
        gulp/

.

//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'static/node_modules/bootstrap-material-design/scss/**/*.scss',
    cssDest = 'static/node_modules/bootstrap-material-design/dist/css/';

gulp.task('default', function () {
    console.log('GULP GULP GULP')
});

gulp.task('styles', function () {
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function () {
    gulp.watch(sassFiles, ['styles']);
});

部分package.json

  "dependencies": {
    "bootstrap": "^4.1.1",
    "bootstrap-material-design": "^4.1.1",
      },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-ng-annotate": "^2.1.0",
    "gulp-uglify": "^3.0.0"
  }

编辑

当我对函数的路径进行硬编码时(在 bootstraps _variables.scss 中)，它起作用并跳到它找不到的下一个导入。

Error in plugin "sass"
Message:
    static\node_modules\bootstrap-material-design\scss\_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/variables.
        on line 57 of static/node_modules/bootstrap-material- design/scss/_variables.scss
        from line 2 of static/node_modules/bootstrap-material- design/scss/_core.scss
        from line 3 of static/node_modules/bootstrap-material- design/scss/bootstrap-material-design.scss
 @import "~bootstrap/scss/variables"; // from bootstrap node_module
  ^

变量.scss

56: @import "C:/Users/PC/Documents/Git/Project/static/node_modules/bootstrap/scss/functions"; // from bootstrap node_module

糟糕，这种硬编码对我来说并不是真正的解决方案。不知道为什么它不能开箱即用。是波浪号没有被识别还是什么？

原始变量.scss

56: @import "~bootstrap/scss/functions"; // from bootstrap node_module

Answer 1

因为 gulp-sass 包还没有安装，你可以做 npm install --save-dev gulp-sass 并且确保在package.json 所在的文件夹

更新

重要 你应该只有 1 个 node_modules 文件夹，它应该在你的 Project 文件夹中，而不是在 static 中文件夹。

如果你有超过 1 个 node_modules 如果你在 static 中运行，它会在那里注入(inject)你的依赖项，这对你的情况来说是不需要的。

所以请确保只有 1 个 node_modules 直接进入你的 Project

然后我会建议您卸载已安装的软件包并安装 Bootstrap 和您想要的其他软件包

npm install --save bootstrap
npm install --save material-design

那么你的结构就是这样

Project/
  gulpfile.js
  package.json
  package-lock.json
  node_modules/
    bootstrap/
    bootstrap-material-design/
    gulp-sass/
    gulp/
  static/
   proejctFiles.scss

确定如何管理 static 文件夹中的文件

然后在您的 gulpfile.js 中，您必须编辑此路径

//style paths
var sassFiles = 'static/node_modules/bootstrap-material-design/scss/**/*.scss',
    cssDest = 'static/node_modules/bootstrap-material-design/dist/css/';

应该是

//style paths
var sassFiles = './static/main.scss',
    cssDest = 'static/dist/css/';

在 main.scss 中，我像那样导入 boostrap

@import "./node_modules/bootstrap/scss/bootstrap";

problem with installing bootstrap-material design

安装引导 Material 设计时出现问题

那么一切都会像那样被编译好