Файл с расширением scss не компилируется в css, выбивает почему-то формат txt?

Question

[ITJoker]

На данный момент я настраиваю gulp, но все же одна ошибка застопорила весь мой прогресс. Я не использую плагин Live Sass, вместо этого я импортировал плагины из пакетов "sass" и "gulp-sass", после чего произвел некоторые действия (все на фото), и вместо того, чтобы scss компилировался в css, оно почему-то идет с расширением txt в итоге. Не знаю в чем проблема и как ее решить. Перелазил весь интернет, но так ответа и не нашел.

Comments

[Антон Антон]

а если ткнуть в plain text справа внизу и выбрать там css?
А вообще может в конфиге накосячено и в css буква с - русская

[Сергей delphinpro]

https://qna.habr.com/help/rules

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег < code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/).
Размещение фрагментов кода в виде изображений запрещено.

[ITJoker]

Антон Антон, только что попробовал, на css оно поменялось, это уже супер), но scss и css не работает, вот фото

[ITJoker]

[ITJoker]

body{
    background-color: #969696;
}

[ITJoker]

[ITJoker]

Теперь кстати данные не обновляются в файл style.min.css из scss/style.scss

[ITJoker]

// Основной модуль
import gulp from "gulp";
// Импорт путей
import { path } from "./gulp/config/path.js";
// Импорт общих плагинов
import { plugins } from "./gulp/config/plugins.js";

global.app = {
    path: path,
    gulp: gulp,
    plugins: plugins
}

// Импорт задач
import { copy } from "./gulp/tasks/copy.js";
import { reset } from "./gulp/tasks/reset.js";
import { html } from "./gulp/tasks/html.js";
import { server } from "./gulp/tasks/server.js";
import { scss } from "./gulp/tasks/scss.js";

// Наблюдатель за изменением в файлах
function watcher() {
    gulp.watch(path.watch.files, copy);
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.scss, scss);
}

const mainTasks = gulp.parallel(copy, html, scss)

//Построение сценариев выполнения задач
const dev = gulp.series(reset, mainTasks, gulp.parallel(watcher, server));

gulp.task("default", dev);

[ITJoker]

это у меня в основном файле gulpfile.js

Answer 1

[sivlvy]

Попробуй проверить все настройки которые указаны у меня. Были некоторые похожие неполадки с gulp, по курсу Ивана Петриченко всё исправил.
Следует обратить внимание на компиляцию gulp.task gulp.watch

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/css//*.+(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/dist"))
      .pipe(browserSync.stream());
});

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

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

Comments

[ITJoker]

Спасибо большое! Можно еще такой вопрос: а не легче ли тогда через плагин Live Sass Compiler это все делать?

[sivlvy]

ITJoker, Live Sass Compiler используется для одной страницы. С gulp работать так сказать "профитней", если много страниц проекта и т.д., легко грузить на репозиторий и т.д.