Преобразование Scss материала Bootstrap в CSS с использованием Gulp дает импорт не найден - PullRequest
Новая
       32

Преобразование Scss материала Bootstrap в CSS с использованием Gulp дает импорт не найден

0 голосов
/ 17 мая 2018

Я получаю следующую ошибку после запуска стилей моей задачи 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']);
});

Частичный пакет.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"
  }

РЕДАКТИРОВАТЬ

Когда я жестко запрограммировал путь к функциям (внутри начальной загрузки _variables.scss), он работал и переходил кследующий импорт не найденНе уверен, почему это не работает из коробки.Тильда не распознается или что-то в этом роде?

original variables.scss 

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

1 Ответ

0 голосов
/ 17 мая 2018

из-за того, что пакет gulp-sass еще не установлен, вы можете просто сделать npm install --save-dev gulp-sass, а также обязательно выполнить эту команду в папке, где есть package.json

UPDATE

ВАЖНО у вас должна быть только 1 node_modules папка, которая должна быть внутри вашей папки Project, а не внутри папки static.

, если у вас больше 1 node_modules, если вы запускаетевнутри static он будет вставлять туда ваши зависимости, которые не нужны для вашего случая.

Поэтому, пожалуйста, убедитесь, что только 1 node_modules направлен на ваш Project

ПОТОМ Я бы порекомендовал вам удалить пакеты, которые вы установили, и установить начальную загрузку и другие пакеты, которые выхотите 

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";

проблема с установкой дизайна загрузочного материала

, так как есть проблема с установкой дизайна загрузочного материала

, тогда все будет скомпилировано отлично

enter image description here

...