PostCSS忽略媒体查询

Question

我将GULP与PostCSS插件一起使用似乎忽略了Sass媒体查询，并在一个选择器中编译了所有CSS。

我尝试使用标准CSS媒体查询，但是这似乎会造成相同的问题。

任何帮助将不胜感激。

这是我目前正在使用的东西：

无礼：

.container {

	&--grid {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		display: grid;
		grid-template-columns: 5% 90% 5%;
	  	grid-template-rows: 10% 85% 5%;
	  	grid-template-areas:	
	  		". logo-column . ." 
	  		". page-content . ." 
	  		". scroll-bottom . .";

		@media screen and (min-width: 600px) {
		    grid-template-columns: 7.5% 85% 2.5% 5%;
		  	grid-template-rows: 10% 85% 5%;
		  	grid-template-areas:	
		  		"logo-column header-navigation header-navigation social-column" 
		  		"name-column page-content right-nav social-column" 
		  		"scroll-bottom scroll-bottom scroll-bottom scroll-bottom";
		}
	}
}

gulpfile：

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	sourcemaps = require('gulp-sourcemaps'),
	jshint = require('gulp-jshint'),
	concat = require('gulp-concat'),
	minify = require('gulp-minify'),
	rename = require('gulp-rename');
	browserSync = require('browser-sync'),
	reload = browserSync.reload;

// POSTCSS PLUGINS
var postcss = require('gulp-postcss'),
	autoprefixer = require('autoprefixer'),
	oldie = require('oldie'),
	cssnano = require('cssnano');


// FILE LOCATIONS
var inputSCSS = './library/scss/main.scss';
var inputCSS = './library/css/main.css';
var outputCSS = './library/css';

var inputFonts = './library/fonts/**/*.*';
var outputFonts = './library/css';

var inputJSDev = './library/js/_dev/**/*.js';
var inputJSVendor = './library/js/_vendor/**/*.js';
var outputJS = './library/js';

var allHTML = './**/*.html';
var allPHP = './**/*.php';


// WATCH TASKS
gulp.task('watch', function() {

	// CSS TAKS
	gulp.watch('./library/scss/**/*.scss', ['postcss', browserSync.reload]);

	// DEV JS TASK
	gulp.watch(inputJSDev, ['concat-dev', browserSync.reload]);

	// VENDOR JS TASK
	gulp.watch(inputJSVendor, ['concat-vendor', browserSync.reload]);

	// HTML CHANGE
	gulp.watch(allHTML).on("change", reload);

	// PHP CHANGE
	gulp.watch(allPHP).on("change", reload);
});


// POSTCSS TASKS
gulp.task('postcss', function() {
	var plugins = [
		autoprefixer({
			browsers: ['last 5 versions'],
			grid: ['true']
		}),
		oldie(),		
		cssnano()
	];
	return gulp.src(inputSCSS)
		.pipe(sourcemaps.init())
		.pipe(sass().on('error', sass.logError))		
		.pipe(postcss(plugins))
		.pipe(sourcemaps.write())
		.pipe(rename('main.min.css'))
		.pipe(gulp.dest(outputCSS));
})


// CONCAT/ MINIFY JS
gulp.task('concat-dev', function() {
	return gulp.src(inputJSDev)
		.pipe(jshint())
    	.pipe(jshint.reporter('jshint-stylish'))
		.pipe(concat('dev.js'))	
		.pipe(minify({
			noSource: []
		}))	
		.pipe(rename('dev.js'))
    	.pipe(gulp.dest(outputJS));
});

gulp.task('concat-vendor', function() {
	return gulp.src(inputJSVendor)
		.pipe(concat('vendor.js'))	
		.pipe(minify({
			noSource: []
		}))
		.pipe(rename('vendor.js'))
    	.pipe(gulp.dest(outputJS));
});


// BROWSERSYNC
gulp.task('browser-sync', function() {
	 browserSync({
	 	proxy: "localhost:8888",
	 });
});


gulp.task('default', [
	'postcss',
	'concat-dev',
	'concat-vendor',
	'browser-sync',
	'watch'
]);

输出CSS：

.container--grid {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 5% 90% 5%;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas: ". a . ." ". b . ." ". c . .";
    -ms-grid-columns: 7.5% 85% 2.5% 5%;
    grid-template-columns: 7.5% 85% 2.5% 5%;
    -ms-grid-rows: 10% 85% 5%;
    grid-template-rows: 10% 85% 5%;
    grid-template-areas: "a d d e" "f b g e" "c c c c"
}