2021-06-15 Sass学习笔记(五) 使用gulp-sass插件写css样式

下载相关插件

1.下载全局node,npm,和sass

2.输入命令:npm init,初始化项目环境,生成package.json文件

3.输入命令:npm i gulp-sass -D,下载gulp-sass插件

搭建环境配置

新建一个gulpfile.js文件

gulpfile.js:

// sass转css
//引入sass文件
const sass = require("gulp-sass");
function sassFn() {
    return src("./sass/*")
        .pipe(sass().on('error', sass.logError))
        .pipe(dest("./css"))
}
exports.sass = sassFn;

编写和生成css样式

1.在sass文件夹下新建test.scss

test.scss:

ul {
    width: 222px;
    height: 555px;
    background-color: azure;
    li {
        height: 100px;
        border: solid;
        color: red;
    }
}

2.输入命令 gulp sass

PS E:\Code> gulp sass
[03:23:52] Using gulpfile E:\Code\gulpfile.js
[03:23:52] Starting 'sass'...
[03:23:52] Finished 'sass' after 53 ms

3.可以看到css文件夹下自动生成一个test.css文件

test.css:

ul {
  width: 222px;
  height: 555px;
  background-color: azure; }
  ul li {
    height: 100px;
    border: solid;
    color: red; }