在WebStorm及VSCode中使用Sass编写微信小程序WXSS样式

第一步 安装Sass

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

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

> sass -v
Ruby Sass 3.7.2

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

1.运行sass-watch（以将scss转换成css）

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

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

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

{
    // 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 参数为

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

修改 Output paths to refresh 参数为

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

相关

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