Почему отображает ошибку?@include sass gulp не работает?

Question

[EmiIt]

gulpfile.js

const { src, dest, task, series, watch, parallel } = require('gulp');
const rm = require("gulp-rm");
const sass = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const reload = browserSync.reload
const sassGlob = require('gulp-sass-glob');
const autoprefixer = require('gulp-autoprefixer');
const px2rem = require('gulp-smile-px2rem');
const gcmq = require('gulp-group-css-media-queries');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const babel = require("gulp-babel");
const uglify = require('gulp-uglify');
const svgo = require('gulp-svgo');
const svgSprite = require('gulp-svg-sprite');

task("clean", () => {
return src('dist/**/*', { read: false }).pipe(rm());
});

task("copy:html", () => {
return src('src/*.html')
.pipe(dest('dist'))
.pipe(reload({ stream: true }));
});

const styles = [
"node_modules/normalize.css/normalize.css",
"src/styles/main.scss"
];

task("styles", () => {
return src(styles)
.pipe(sourcemaps.init())
.pipe(concat("main.min.scss"))
.pipe(sassGlob())
.pipe(sass().on('error', sass.logError))
.pipe(px2rem())
.pipe(
autoprefixer({
cascade: false
})
)
.pipe(gcmq())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(dest("dist"))
.pipe(reload({stream:true}));

});

const libs = [
"node_modules/jquery/dist/jquery.js",
"src/scripts/*.js"
]

task('scripts', () => {
return src(libs)
.pipe(sourcemaps.init())
.pipe(concat("main.min.js", {newLine: ";"}))
.pipe(babel({
presets: ['@babel/env']
}))
.pipe( uglify())
.pipe(sourcemaps.write())
.pipe(dest("dist"))
.pipe(reload({stream:true}))
});

task("icons", () => {
return src('src/images/icons/*.svg')
.pipe(svgo({
plugins: [
{
removeAttrs: {
attrs: "(fill|stroke|style|width|height|data.*)"
}
}
]
})
)
.pipe(svgSprite({
mode: {
symbol: {
sprite:"../sprite.svg"
}
}
}))
.pipe(dest('dist/images/icons'));
});

task('server', () => {
browserSync.init({
server: {
baseDir: "./dist"
},
// open: false
});
});

watch('./src/styles/**/*.scss', series("styles"));
watch('./src/*.html', series("copy:html"));
watch('./src/scripts/*.js', series("scripts"));
watch('./src/images/icons/*.svg', series("icons"));

task("default",
series("clean",
parallel("copy:html", "styles", "scripts", "icons"),
"server"));

Comments

[Сергей delphinpro]

Сообщение "Error: Undefined mixin" ни о чём вам не говорит?

Answer 1

[inkShio]

как понимаю ты пытаешься адаптировать блоки под мобилу
тогда тебе надо писать так

.benefit {
  text-align: center;
  @media only screen and (min-width: $phones) {
    display: flex;
  }
}

Comments

[Ankhena]

неа, там миксин используется, а не переменная

$phones: 100px;  // нужная ширина

@mixin phones {
  @media (min-width: $phones ) {
    @content;
  }
}

[inkShio]

Ну так у него ошибка, что нету миксина phones, зато на скринах есть переменная. Скорей всего он запутался, что к чему.