// sass gulp.task("sass", function() { const postcss = require("gulp-postcss"); const autoprefixer = require("autoprefixer"); const sass = require("gulp-sass"); return gulp.src("./public/app/style.scss") .pipe(sass().on("error", sass.logError)) .pipe(postcss([ autoprefixer({ browsers: ["last 8 Chrome versions"] }) ])) .pipe(gulp.dest("./public/app/")); });
function getCommonStyleLoaders(enableModules) { let cssOptions = {}; if (enableModules) { cssOptions = { sourceMap: true, modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]' }; } return [ { loader: 'css-loader', options: cssOptions }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [autoprefixer({ browsers: ['last 2 versions'] })] } }, { loader: 'resolve-url-loader' }, ]; }
async processCss(assetName, asset, assets) { let css = asset.source(); css = await postcss([autoprefixer({browsers: this.options.browsers})]).process(css).css; const result = csso.minify(css, Object.assign({filename: assetName}, this.options)); css = result.css; if (this.options.sourceMap) { assets.setAsset(`${assetName}.map`, result.map.toString()); css += `/*# sourceMappingURL=${path.basename(assetName)}.map */`; } return css; }
ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: {minimize: true} }, { loader: 'postcss-loader', options: { plugins: () => [autoprefixer({ browsers: ['> 1%', 'IE >= 10'] })], }, }, { loader: 'sass-loader' }, ], })
gulp.task('vendor:styles', () => gulp.src(`${src}/assets/styles/vendor/vendor.scss`) .pipe(when(!production, sourcemaps.init())) .pipe(sass({ importer: moduleImporter() })) .pipe(postcss([ autoprefixer({ browsers }), ])) .pipe(concat('vendor.css')) .pipe(when(!production, sourcemaps.write('.'))) .on('error', onError) .pipe(gulp.dest(`${dist}/assets/css`)) )
//////////////////////////////////////////////////////////////////////////////// // Compile CSS task //////////////////////////////////////////////////////////////////////////////// function scss(){ const sassOptions = { errLogToConsole: true, outputStyle: 'expanded' }; return gulp .src(scssInput) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass(sassOptions).on('error', sass.logError)) .pipe(postcss( [ autoprefixer(), cssnano() ] )) .pipe(sourcemaps.write()) .pipe(gulp.dest(cssAssets)) }
ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1, minimize: true, sourceMap: true, } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', ], flexbox: 'no-2009', }), pxtorem({ rootValue: 100, propWhiteList: [] }) ], }, }, ], })
function styles() { return src('app/styles/*.scss') .pipe($.plumber()) .pipe($.if(!isProd, $.sourcemaps.init())) .pipe($.sass.sync({ outputStyle: 'expanded', precision: 10, includePaths: ['.'] }).on('error', $.sass.logError)) .pipe($.postcss([ autoprefixer() ])) .pipe($.if(!isProd, $.sourcemaps.write())) .pipe(dest('.tmp/styles')) .pipe(server.reload({stream: true})); }
gulp.task('sass', function () { var postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer'); return gulp.src([ 'node_modules/material-design-lite/src/material-design-lite.scss', app.src + 'sass/main.scss' ]) .pipe($.concat('style.scss')) .pipe($.sass({ outputStyle: 'compressed', includePaths: ['node_modules/material-design-lite/src/'] }).on('error', $.sass.logError)) .pipe(postcss([ autoprefixer({browsers: ['> 1%']}) ])) .pipe(gulp.dest(app.dist + 'css')); });
ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), pxtorem({ rootValue: 100, propWhiteList: [] }) ] } }, 'less-loader' ] })
plugins () { return [ autoprefixer({ browsers: [ '> 1%', 'last 3 versions', 'iOS > 6', 'ie > 9', 'not ie < 10' ] }) ]; }
ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: {minimize: true} }, { loader: 'postcss-loader', options: { plugins: () => [autoprefixer({ browsers: ['> 1%', 'IE >= 10'] })], }, }, { loader: 'sass-loader' }, ], })
plugins() { return [autoprefixer({ browsers: "cover 99.5%" })]; }
plugins() { return [autoprefixer({ browsers: "last 3 versions" })]; }
ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), pxtorem({ rootValue: 100, propWhiteList: [] }) ] } } ] })