DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-03-11 16:06
  • 更新:2021-04-01 17:11
  • 阅读:24259

HBuilderX scss/sass 使用教程

分类:HBuilderX

1. 安装node-sass插件

在HBuilderX中,使用scss/sass是需要安装node-sass编译插件的。

点击菜单【工具】【插件安装】

如果安装失败,请见:http://ask.dcloud.net.cn/article/35468

2. 编译scss文件

选中scss文件,鼠标右键,点击菜单【外部命令】【sass】【编译sass/scss】

3. 编译风格与样式输出

目前,node-sass的默认编译风格如下:

{  
    'include-path': process.cwd(),  
    'indent-type': 'space',  
    'indent-width': 2,  
    linefeed: 'lf',  
    'output-style': 'nested',  // 嵌套输出  
    precision: 5,  
    quiet: false,  
    recursive: true  
}

修改编译风格的方法,打开sass配置文件,修改command。

比如:

$ "command": "${programPath} ${file} ${fileBasename}.css --output-style compact"

风格为:展开输出expanded、紧凑型compact、压缩输出compressed

3 关注 分享
skysowe 上交国家 v***@163.com

要回复文章请先登录注册

木四

木四

scss插件不支持scss的@for语法么
2021-04-01 17:11
FE_liyangyang

FE_liyangyang

回复 DCloud_HB_WDL :
我的项目不是uniapp的,我把这个参数改成true,保存scss文件也不自动编译啊
2020-12-08 16:08
愿随风丶飘雪

愿随风丶飘雪

回复 愿随风丶飘雪 :
需要重启HbuilderX生效
2020-11-06 14:55
愿随风丶飘雪

愿随风丶飘雪

回复 愿随风丶飘雪 :
续期重新Hbuilder生效
2020-11-06 14:53
愿随风丶飘雪

愿随风丶飘雪

回复 4***@qq.com :
数组里面可以继续加参数
```
"command": [

"${programPath}",

"${file}",

"${fileBasename}.css",

"--output-style",

"expanded"

]
```
这样写可以
2020-11-06 14:53
愿随风丶飘雪

愿随风丶飘雪

回复 4***@qq.com :
数组里面可以继续加参数
"command": [
"${programPath}",
"${file}",
"${fileBasename}.css",
"--output-style",
"expanded"
]
这样写可以
2020-11-06 14:51
2***@qq.com

2***@qq.com

Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
2020-06-22 11:46
4***@qq.com

4***@qq.com

```"command": [
"${programPath}",
"${file}",
"${fileBasename}.css"
],```
现在的 command 成了数组,就3个参数,怎么修改编译风格啊?
2020-04-12 16:37
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 7***@qq.com :
如上面的第二张图,点击【插件配置】,即可打开配置文件
2020-02-17 09:49
7***@qq.com

7***@qq.com

有大佬知道配置文件目录吗?
2020-02-16 16:48