Gulp-sass не выдает никаких ошибок, но мой scss не отображается в браузере - PullRequest
Новая
       48

Gulp-sass не выдает никаких ошибок, но мой scss не отображается в браузере

0 голосов
/ 21 мая 2019

Я настраиваю gulp-sass для использования в моем проекте, но мне трудно заставить его работать. Я попробовал почти каждую ссылку здесь, чтобы настроить свои задачи и посмотреть, но не могу понять, почему мои стили scss не загружаются в браузере (я запускаю его локально).

У меня есть базовые стили в моей таблице стилей .css и в моей таблице стилей .scss для тестирования, и запускаются только стили в .css - у меня нет сообщений об ошибках в браузере или когда я запускаю gulp sass в корень моего проекта.

вкладка источников в инспекторе

запуск gulp sass в командной строке

Я поставил задачу gulp-sass с помощью отсюда: https://medium.freecodecamp.org/how-to-set-up-gulp-sass-using-the-command-line-if-youre-a-beginner-17729f53249

Моя структура проекта выглядит следующим образом: 

ProjectName
-> app
--> css
---> styles.css
--> fonts
--> images
--> js
--> scss
---> main.scss
-> node_modules
gulpfile.js
index.html
package-lock.json
package.json

my gulpfile.js: 

'use strict';

var gulp = require("gulp");
var sass = require("gulp-sass");

gulp.task("sass", function () {
 gulp.src("app/scss/*.scss")
 .pipe(sass().on("error", sass.logError))
 .pipe(gulp.dest("app/css"));
 });

 //compile and watch
  gulp.task("sass:watch", function() {
  gulp.watch("app/scss/*.scss", ["scss"]);
 });

 gulp.task("sass", function(done) {
     console.log("Hello!"); done(); }
 );

и я связал свою таблицу стилей CSS в индексе как <link rel="stylesheet" href="app/css/styles.css">.

Я использовал gulp и sass до работы, но все уже настроено, и я впервые настраиваю его на сольный проект. Любая помощь очень ценится :) спасибо.

1 Ответ

1 голос
/ 22 мая 2019

Если вы хотите, чтобы ваша последняя scss-трансляция произвела styles.css, вам нужно сделать одну из двух вещей:

  1. Либо начинайте с styles.scss вместо main.scss, и sass будетавтоматически назовите его styles.css или

  2. Измените задачу sass, чтобы переименовать результирующий файл: 

    var rename = require("gulp-rename");

gulp.task("sass", function () {
   return gulp.src("app/scss/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(rename('styles.css`))
    .pipe(gulp.dest("app/css"));
});

[Если выиспользуя gulp v4 (запустите gulp -v), ваша задача watch не будет работать.Попробуйте: 

gulp.watch("app/scss/*.scss", gulp.series("scss"));

в этой функции и вообще избавьтесь от второй sass задачи.]

...