更新

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
  ^

variables.scss

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

Grr，这种硬编码对我来说似乎不是一个解决方案。不知道为什么它没有开箱即用。波浪线是不被识别的还是什么？

original variables.scss

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

Answer 1

由于尚未安装gulp-sass软件包，您只需执行npm install --save-dev gulp-sass并确保在package.json所在的文件夹中运行此命令

更新

重要您应该只有一个node_modules文件夹，它应位于Project文件夹内static文件夹内。

如果您在node_modules内运行时有超过1 static，那么它会在那里注入您的依赖项，而您的案例则不需要。

因此，请确保只有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/';

IT应该

//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

因为安装自举材料设计存在问题

然后一切都会像那样编译得很好

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

1 个答案:

更新