HBuilderX配置SCSS

Posted 2021-05-20 二木成林

学习视频地址：https://www.bilibili.com/video/BV1Zg4y1v75U?p=1

相关介绍

安装

安装node-sass

npm install  node-sass  -g

查看是否安装成功

node-sass --version

如果安装得太慢，可以切换为国内的镜像。

HBuilderX配置scss

工具——>插件安装

安装插件

重启HBuilderX，然后创建一个test.scss文件，可任意输入scss内容

$width: 1600px;
$pen-size: 3em;
#app {
    height: $width;
    font-size: $pen-size;
}

选中test.scss文件，右键单击出现面板：外部命令/插件——>sass——>编译scss/sass

编译完成后，可以在test.scss同级目录看到生成的test.css文件

其中test.css结果为