Блог

Главная - Вопросы по программированию - Обновлен SASS с помощью @import. Он больше не читает мою основную таблицу стилей

Обновлен SASS с помощью @import. Он больше не читает мою основную таблицу стилей

#css #sass #gulp

#css #sass #глоток

Вопрос:

Я работаю над обновлением нашего SASS. Я использую основную таблицу «sass», которая импортирует все остальное. Когда я изменяю импортированный файл, он не компилирует его. Похоже, что он даже не читает @imported files. Когда я изменяю основной лист, он компилируется просто отлично.

Версия Gulp: 4.0.2 Версия SASS: 4.1.0

Мой файл gulp:

 const gulp = require('gulp')
const sass = require('gulp-sass')
const clean = require('gulp-clean-css')
const rename = require('gulp-rename')
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const prefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps');


var sassSourcesMain = '../scss/source-main.scss';

function style() {
    return (
        gulp
        .src(sassSourcesMain)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(prefixer())
        .pipe(clean())
        .pipe(rename('main.min.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('../min'))
    );
}


function watch(){
    gulp.watch(sassSourcesMain, style)
}

exports.watch = watch
exports.style = style;
exports.default = watch;

Моя основная таблица стилей, из которой все импортируется:

 @charset "UTF-8";

@import "base/colors";
@import "base/variables";
@import "base/animations";
@import "base/resets";
@import "base/type";
@import "base/homepagebanners";

И так далее.

Комментарии:

1. Почему вы закомментировали строку, которая просматривает другие файлы? С вашим кодом он только компилирует основной sass, потому что это то, что вы говорите ему делать var sassSourcesMain = '../scss/source-main.scss';

2. Когда я использую эту строку, я получаю всевозможные ошибки, в которых говорится, что другие файлы не могут найти переменные, которые следует импортировать из строки выше: source-main.scss

3. Затем вам следует выполнить некоторую отладку, чтобы понять, почему эти переменные не могут быть найдены. Это может быть @import проблема с порядком.

4. Моя проблема в том, что он даже не читает @imported files. Когда я редактировал base / colors, он не перекомпилируется и не замечает изменений.

5. Да, но я только что понял. Мне нужно было просмотреть вложенные папки.

Ответ №1:

Мне нужно было добавить вложенные папки в мою функцию просмотра:

 function watch() {
    gulp.watch(paths.styles.src, style);
    gulp.watch(subscssfiles, style);
}