parcel 构建打包 scss、less、stylus css预处理器

scss、less、stylus css预处理器构建

---

在我们开发的过程中，使用CSS预处理器可以极大的提升我们的开发效率，所以使用打包工具开发构建我们的预处理器是非常重要的一环，所以这章节内容，将给大家介绍如何使用parcel打包构建我们的项目中的几款css预处理

scss预处理器构建

• SCSS 编译需要sass(dart-sass的 JS 版本)模块。通过 npm 安装：

cnpm install sass -D

• 接着我们目录下创建一个custum.scss，当然在目录下也可以在目录下配置.sassrc文件

$body-color:#F90;
$w:100%;
html{width:$w;height:$w;}
body{
  width:$w;height:$w;background-color:$body-color;
  div{
    width: $w;
  }
}

• 然后在index.js中引入使用：

import './custom.scss'

• 启动服务，在浏览器查看效果如下：
  

Less预处理器构建

• 首先我们需要新建一个custom.less文件，编辑如下：

@bg:purple;
@wh:100%;
body,html{width:@wh;height:@wh;background-color: @bg;}

• 接着，我们在我们的index.js中引入一下：

import './custom.less'

Stylus预处理器构建

• 首先我们需要新建一个custom.styl文件，编辑如下：

bg(){
  background-color:purple;
}
wh(){
  width:100%;height:100%;
}
body,html
  wh();bg();

• 接着，我们在我们的index.js中引入一下：

import './custom.styl'

总结

parcel处理我们的css预处理器文件，完全支持开箱即用的，如果pacrel检测到你使用的哪种类型的预处理器，它呢，就会自动去下载对应的第三方依赖模块包，来支持且完成这次打包构建，是不是非常简单呢

转载：https://blog.csdn.net/WU5229485/article/details/101760762