Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Mysql

  • PHP

  • Python

  • java

  • Go

  • 数据库

  • C#

  • ElasticSearch

  • Git

  • Gulp

    • gulp快速入门
    • JavaScript 和 Gulpfile
    • 使用 gulp 压缩 JS
    • 使用 gulp 压缩 CSS
    • 使用 gulp 处理 SASS
      • 安装
      • 基本使用
      • 选项
    • 使用 gulp 配置 tailwindcss + sass
  • Microsoft

  • Linux

  • 其它

  • 技术
  • Gulp
mrcdh
2021-02-25
目录

使用 gulp 处理 SASS

使用 gulp-sass (opens new window) 来处理sass

# 安装

npm install sass gulp-sass --save-dev
1

# 基本使用

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
 
// 处理sass文件
function compressSASS(cb){
  return gulp.src('sass/*.scss')
    .pipe(sass().on('error', sass.logError))  // 异步编译
    // .pipe(sass.sync().on('error', sass.logError)) // 同步编译,同步编译速度是异步编译速度的两倍
    .pipe(gulp.dest('dist/sass'));
  cb()
}
// 编译任务
exports.compressSASS = compressSASS
// 实时监听编译
exports.watchSass = function(cb){
  gulp.watch('sass/*.scss', compressSASS)
  cb()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 选项

像node-sass中传递选项

function compressSASS(cb){
  return gulp.src('sass/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))  // 异步编译
    // .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError)) // 同步编译,同步编译速度是异步编译速度的两倍
    .pipe(gulp.dest('dist/sass'));
  cb()
}
1
2
3
4
5
6
7
#gulp
上次更新: 2023/09/22, 16:54:32
使用 gulp 压缩 CSS
使用 gulp 配置 tailwindcss + sass

← 使用 gulp 压缩 CSS 使用 gulp 配置 tailwindcss + sass→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×