Sass @import importiert keine Partials

Question

Ich bin ein Noobie zu pro npm/gulp-artigen Workflows und ich verwende ein Repo namens react-starify, um eine einfache Webapp zu erstellen.

Ich versuche, partielle scss-Dateien mit @import "Variablen"; in meiner main.scss-Datei. In der finalen kompilierten CSS-Datei wird jedoch tatsächlich "@import" Variablen ";" an der Spitze der Datei, anstatt es als Teil der Datei einzuziehen.

Was fehlt mir?

Hier ist meine gulpfile.babel.js:

import gulp from 'gulp'; 
import autoprefixer from 'autoprefixer'; 
import browserify from 'browserify'; 
import watchify from 'watchify'; 
import source from 'vinyl-source-stream'; 
import buffer from 'vinyl-buffer'; 
import eslint from 'gulp-eslint'; 
import babelify from 'babelify'; 
import uglify from 'gulp-uglify'; 
import rimraf from 'rimraf'; 
import notify from 'gulp-notify'; 
import browserSync, { reload } from 'browser-sync'; 
import sourcemaps from 'gulp-sourcemaps'; 
import postcss from 'gulp-postcss'; 
import rename from 'gulp-rename'; 
import nested from 'postcss-nested'; 
import vars from 'postcss-simple-vars'; 
import extend from 'postcss-simple-extend'; 
import cssnano from 'cssnano'; 
import htmlReplace from 'gulp-html-replace'; 
import imagemin from 'gulp-imagemin'; 
import pngquant from 'imagemin-pngquant'; 
import runSequence from 'run-sequence'; 
import ghPages from 'gulp-gh-pages'; 

const paths = { 
    bundle: 'app.js', 
    entry: 'src/Index.js', 
    srcCss: 'src/**/main.scss', 
    srcImg: 'src/images/**', 
    srcLint: ['src/**/*.js', 'test/**/*.js'], 
    dist: 'dist', 
    distJs: 'dist/js', 
    distImg: 'dist/images', 
    distDeploy: './dist/**/*' 
}; 

const customOpts = { 
    entries: [paths.entry], 
    debug: true, 
    cache: {}, 
    packageCache: {} 
}; 

const opts = Object.assign({}, watchify.args, customOpts); 

gulp.task('clean', cb => { 
    rimraf('dist', cb); 
}); 

gulp.task('browserSync',() => { 
    browserSync({ 
    server: { 
     baseDir: './' 
    } 
    }); 
}); 

gulp.task('watchify',() => { 
    const bundler = watchify(browserify(opts)); 

    function rebundle() { 
    return bundler.bundle() 
     .on('error', notify.onError()) 
     .pipe(source(paths.bundle)) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(paths.distJs)) 
     .pipe(reload({ stream: true })); 
    } 

    bundler.transform(babelify) 
    .on('update', rebundle); 
    return rebundle(); 
}); 

gulp.task('browserify',() => { 
    browserify(paths.entry, { debug: true }) 
    .transform(babelify) 
    .bundle() 
    .pipe(source(paths.bundle)) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
    .pipe(uglify()) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(paths.distJs)); 
}); 

gulp.task('styles',() => { 
    gulp.src(paths.srcCss) 
    .pipe(rename({ extname: '.css' })) 
    .pipe(sourcemaps.init()) 
    .pipe(postcss([vars, extend, nested, autoprefixer, cssnano])) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(paths.dist)) 
    .pipe(reload({ stream: true })); 
}); 

gulp.task('htmlReplace',() => { 
    gulp.src('index.html') 
    .pipe(htmlReplace({ css: 'styles/main.css', js: 'js/app.js' })) 
    .pipe(gulp.dest(paths.dist)); 
}); 

gulp.task('images',() => { 
    gulp.src(paths.srcImg) 
    .pipe(imagemin({ 
     progressive: true, 
     svgoPlugins: [{ removeViewBox: false }], 
     use: [pngquant()] 
    })) 
    .pipe(gulp.dest(paths.distImg)); 
}); 

gulp.task('lint',() => { 
    gulp.src(paths.srcLint) 
    .pipe(eslint()) 
    .pipe(eslint.format()); 
}); 

gulp.task('watchTask',() => { 
    gulp.watch(paths.srcCss, ['styles']); 
    gulp.watch(paths.srcLint, ['lint']); 
}); 

gulp.task('deploy',() => { 
    gulp.src(paths.distDeploy) 
    .pipe(ghPages()); 
}); 

gulp.task('watch', cb => { 
    runSequence('clean', ['browserSync', 'watchTask', 'watchify', 'styles', 'lint', 'images'], cb); 
}); 

gulp.task('build', cb => { 
    process.env.NODE_ENV = 'production'; 
    runSequence('clean', ['browserify', 'styles', 'htmlReplace', 'images'], cb); 
}); 

Ich bemerkte auch ein anderes Problem, dass es eine Variable in einem @mixin als undefiniert sieht. z.B.

@mixin blacklinks ($link, $visit, $hover, $active, $disabled) { 
    a, 
    .text-btn-black { 
     @include a1; 
     text-decoration: none !important; 
     color: $link; 
     &:visited { 
      color: $visit; 
     } 
     &:hover { 
      color: $hover; 
     } 
     &:active { 
      color: $active; 
     } 
     &:disabled { 
      color: $disabled 
     } 
    } 
} 

Es scheitert bei $ Link, wo das var von einem anderen Teil _base.scss gesendet wird.

@include blacklinks($black, $black, $mediumgray, $darkgray, $disabledtext); 

Answer 1

Sie müssen das postcss-import Paket installieren und zu verwenden.

Hier ist eine vereinfachte, aber funktionierendes Beispiel:

gulpfile.js:

import atImport from 'postcss-import'; 

gulp.task('styles',() => { 
    gulp.src(paths.srcCss) 
    .pipe(rename({ extname: '.css' })) 
    .pipe(sourcemaps.init()) 
    .pipe(postcss([atImport, vars, extend, nested, autoprefixer, cssnano])) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(paths.dist)) 
    .pipe(reload({ stream: true })); 
}); 

src/styles/main.scss:

@import 'variables.scss'; 

.foo { 
    color:$c; 
} 

src/styles/variables.scss:

$c: blue;