微信小程序使用sass编写样式转换成wxss

Amodoro

已于 2024-02-22 15:47:32 修改

阅读量585

点赞数 7

文章标签：微信小程序 sass

于 2024-02-19 16:44:50 首次发布

本文链接：https://blog.csdn.net/qq_40230735/article/details/136173259

版权

去vscode编辑器下载EasySass插件

在这里插入图片描述

微信开发者工具导入vscode下载的EasySass插件

在这里插入图片描述
EasySass插件位置

[计算机当前用户目录]/.vscode/extensions/spook.easysass-0.0.6

修改微信开发者工具已导入的EasySass插件的package.json

点击微信开发者工具菜单的编辑->打开编辑器扩展目录
在这里插入图片描述
修改package.json

改成一样的👇

代码复制

{
	"format": "expanded",
	"extension": ".wxss"
}

ps

添加这个插件后，要关闭微信开发者工具的自动保存，要不然修改scss文件会一直报错。创建的sass文件以.scss结尾为后缀，不要用.sass

在这里插入图片描述

我的package.json

{
	"name": "easysass",
	"displayName": "Easy Sass",
	"description": "Built-in, easy to use Sass compiler",
	"icon": "icon.png",
	"galleryBanner": {
		"theme": "light"
	},
	"repository": {
		"type": "git",
		"url": "https://github.com/wojciechsura/easysass.git"
	},
	"version": "0.0.6",
	"publisher": "spook",
	"homepage": "http://spooksoft.pl",
	"engines": {
		"vscode": "^1.10.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"*"
	],
	"main": "./extension",
	"contributes": {
		"configuration": {
			"type": "object",
			"title": "EasySass configuration",
			"properties": {
				"easysass.compileAfterSave": {
					"type": "boolean",
					"default": true,
					"description": "Automatically compile SASS/SCSS file after saving"
				},
				"easysass.formats": {
					"type": "array",
					"default": [
						{
							"format": "expanded",
							"extension": ".wxss"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},
				"easysass.excludeRegex": {
					"type": "string",
					"default": "",
					"description": "Regular expression for filenames (excluding path) excluded from building. Leave empty to disable."
				},
				"easysass.targetDir": {
					"type": "string",
					"default": "",
					"description": "Target directory for generated files. If relative, will be based on currently opened folder in VS Code."
				}
			}
		},
		"commands": [
			{
				"command": "easysass.compileAll",
				"title": "Compile all SCSS/SASS files in the project"
			}
		]
	},
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	"dependencies": {
		"replace-ext": "latest"
	},
	"devDependencies": {
		"typescript": "^2.0.3",
		"vscode": "^1.0.0",
		"mocha": "^2.3.3",
		"eslint": "^3.6.0",
		"@types/node": "^6.0.40",
		"@types/mocha": "^2.2.32"
	},
	"__metadata": {}
}