第一步 安装Sass

根据官方说明安装Sass 传送门

命令行键入”sass -v”,若返回版本号则安装正确

1
2
> sass -v
Ruby Sass 3.7.2

第二步 【VSCode】运行sass-watch和wxssConvertor插件

1.运行sass-watch(以将scss转换成css)

1
sass --watch --no-source-map --update --style expanded .

2.安装VSCode插件 wxssConvertor,点击Command+Shift+P,输入watchCss运行此插件(以将css转换成wxss)

P.S. 可以在.vscode文件夹中创建tasks.json,以在打开项目时,自动运行sass-watch,格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
// 将sass转换成css,之后使用wxssConvertor插件的watchCss命令,将css转换成wxss
{
"label": "sass-watch",
"type": "shell",
"command": "sass --watch --no-source-map --update --style expanded .",
"runOptions": {
"runOn": "folderOpen"
}
}
]
}

第二步 【WebStorm】配置WebStorm的File Watcher

点击WebStorm左上角 “File -> Settings”,进入“Tools -> File Watchers”配置,点击左上角“+”,新建一个SCSS配置(若使用Sass语法则选择Sass配置)

修改 Arguments 参数为

1
--no-cache --update --style expanded --sourcemap=none $FileName$:$FileNameWithoutExtension$.wxss

修改 Output paths to refresh 参数为

1
$FileNameWithoutExtension$.wxss:$FileNameWithoutExtension$.wxss.map

相关

  • 如公用的scss文件,不想被预处理,将文件名前加”_”即可,如“_common.scss”
  • 官方文档 传送门