1
1

Запускаю gulp в терминале всё работает открывается вкладка в браузере но есть одно но показывает ошибку и SCSS не компилирует в CSS
То есть мне нужно что бы Style.scss компилировал код в Style.min.css
Помогите пожалуйста!

Папки:
css/style.min.css
sass/base/_mixins.scss
sass/base/_variebles.scss
sass/block/style.scss

настройка gulpfile.js:

const gulp        = require('gulp');
const browserSync = require('browser-sync');
const sass        = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename");

gulp.task('server', function() {

    browserSync({
        server: {
            baseDir: "src"
        }
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('styles', function() {
    return gulp.src("src/sass/**/*.+(scss|sass)")
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer())
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('watch', function() {
    gulp.watch("src/sass/**/*.+(scss|sass)", gulp.parallel('styles'));
})

gulp.task('default', gulp.parallel('watch', 'server', 'styles'));



Код ошибки в терминале при запуске команды gulp:

Error in plugin "sass"
Message:
    src\sass\block\style.scss
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'base/variables';
  │         ^^^^^^^^^^^^^^^^
  ╵
  src\sass\block\style.scss 1:9  root stylesheet

полный код в терминале:

[01:49:04] Using gulpfile D:\IT\WEB\Project\RunSmart\gulpfile.js
[01:49:04] Starting 'default'...
[01:49:04] Starting 'watch'...
[01:49:04] Starting 'server'...
[01:49:04] Starting 'styles'...
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://192.168.178.110:3000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------
[Browsersync] Serving files from: src
Error in plugin "sass"
Message:
    src\sass\block\style.scss
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'base/variables';
  │         ^^^^^^^^^^^^^^^^
  ╵
  src\sass\block\style.scss 1:9  root stylesheet
[01:49:04] Finished 'styles' after 380 ms

Код в style.scss:

@import 'base/variables';
* {
    font-family: 'Museo Sans Cyrl', sans-serif;
}
.container {
    max-width: 950px;
    margin: 0 auto;
}

Oleh Khmilovskyi
2 years ago






если у вас пишет ошибку что не находит файл для импорта по указаному пути, значит путь надо смотреть верно ли указан и файлы в том месте

насколько понял должна быть у вас такая структура папок - путь к файлу style.scss на диске

D:\IT\WEB\Project\RunSmart\src\sass\block\style.scss

у вас так?

замечу что в уроке у преподавателя другая структура папок чем у вас, к примеру, файл style.scss лежит в папке \src\sass\style.scss

проверьте, вы специально сделали по-другому или по-ошибке, поэтому может не работать из-за этого, т.к. если файлы/папки меняете, то в коде тоже нужны изменения, чтобы файлы подргружались по правильному указанному пути

Роман
2 years ago

Спасибо Роман!
style.scss должен был быть как вы сказали но проблема не решилась
После того опять пишу gulp в терминале и ошибка:

Error in plugin "sass"
Message:
    src\sass\style.scss
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'base/variables';
  │         ^^^^^^^^^^^^^^^^
  ╵
  src\sass\style.scss 1:9  root stylesheet
Oleh Khmilovskyi
2 years ago

2 ответов