使用scss开发微信小程序

方案一

我之前为微信小程序创建依赖库时用过这个。 我使用gulp进行编译，并将源代码和编译后的代码分别放在src和dist目录中。 Gulp 处理 src 下的所有文件，将 scss 转换为 css，并将所有其他文件移动到 dist 下相应的位置，保持所有其他文件不变。

这里我们不再赘述。 代码见Wux。

选项2

这个非常简单容易，使用Webstorm/IDEA的文件观察器功能进行实时转换。

安装Ruby和sass

在命令行输入sass -v并验证是否显示版本号。 我将省略安装步骤。

安装File Watcher

在插件市场搜索并安装（已安装则跳过）

添加SCSS转换脚本

这样现在插件已经安装好了，当你打开项目中，会自动显示一个scss转css的向导，非常方便。 然而，仍然需要进行一些修改。 配置如下：

首先，更改生成文件的后缀。 比如这里的淘宝小程序就应该是acss。

然后将参数更改为：

$FileName$:$FileNameWithoutExtension$.acss --no-缓存 --sourcemap=none --default-encoding utf-8 --style Expanded

--no-如果不加缓存，scss文件是相同的它在目录中。 您将看到 .sass-cache 目录。

如果不添加--sourcemap=none，.map文件将出现在与scss文件相同的目录中。

如果不添加--default-encoding utf-8，scss文件中有中文注释就会报错。

无需添加样式。 这里使用了缩进和未压缩的样式。 小程序无论如何在打包发布时都会被压缩，所以这里保持了可读性。

现在这个 scss 转换将仅适用于您的项目。 如果新建一个小程序项目，则需要重新添加（不建议设置全局，容易造成意外损坏）。

请注意，文件观察器列表右侧操作栏下方有导入和导出按钮。 您可以导出并保存当前配置的设置。 以后创建新项目时只需要导入即可。

稍后还会出现另一个问题。 如果您手动删除已编译的css（即wxss或acss，下文省略）文件，并且scss文件保持不变，则不会重新编译该css文件。 或者，如果监控失败或时机不佳，您的 CSS 可能已过时。 因此，我需要一个命令来跨目录统一转换 scss 文件，以确保没有任何内容丢失并且我的代码是最新的。

但是，我已经阅读了 sass 和 sass-convert 的文档很长时间，我注意到没有可用的选项允许命令行遍历所有 scss 文件在给定的文件中我找不到描述它的方法。 将目录中的内容转换为 CSS 并将其放入源代码中。 指定文件所在目录，并将后缀名为wxss或acss。

因此，这种遍历行为只能通过nodejs来实现。 这是代码：

创建编译脚本build/scss-convert.js。

var 路径 = require("path")var fs = require("fs")const { exec } = require('child_process')const basePath = path.resolve(__dirname, '../')function mapDir(dir,callback,finish) { fs. readdir(dir, function(err, files) { if (err) { console.error(err) return } files.forEach((filename,index) => { let pathname = path.join(dir, filename) fs.stat (pathname, (err, stats) => { // 读取文件信息 if (err) { console.log('获取文件统计信息失败') return } if (stats.isDirectory()) { mapDir (pathname, callback,退出） } else if (stats.isFile()) { if (!['.scss'].includes(path.extname (路径名))) { return } 回调(路径名) } })if (index === files.length - 1) {finish &&finish() } }) })}mapDir(basePath, function (file) { const newFileWithoutExt = path.basename(file, '.scss& #39; ) if (newFileWithoutExt.startsWith('_')) { return // 根据scss规则，下划线开头的文件不会生成css } // exec允许nodejs执行外部命令 exec(`sass -- no -缓存 --sourcemap=none --default-编码 utf-8 --样式扩展 ${file}:$ {newFileWithoutExt}.acss` , { cwd: path.dirname(file) // 如果不写这个，生成的文件会出现在根目录下 }, (err, stdout, stderr) => { if ( err) { console.log (err) return } console.log(`stdout: ${stdout}`) }) }, function() { // console.log('xxx 文件目录已扫描') } )

将脚本添加到 package.json:

'脚本&q'uot;: { "scss": "node build/scss-convert", }

推荐教程：《微信小程序》

下载微信应用

微信支持发送通讯软件。 通过移动电话网络的语音消息、视频、照片和文本。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：使用scss开发微信小程序 https://zhujicankao.com/124061.html