Entwickeln Sie ein WeChat-Applet mit scss

Das WXSS von WeChat-Miniprogrammen, das ACS von Alibabas Taobao und die Alipay-Miniprogramme sind dem nativen CSS sehr ähnlich. Ich bin es jedoch gewohnt, dynamische CSS-Sprache in der Webentwicklung zu verwenden, und das ist sehr ähnlich Es ist unangenehm, in natives CSS zurückzuschreiben. Insbesondere die verschachtelte Schreibmethode im Eltern-Kind-Stil ist sehr umständlich.

Daher hoffe ich, eine automatisierte Konstruktionslösung zu haben, die scss einfach in eine Stilsprache für kleine Programme umwandeln kann.

Option 1

Ich habe es zuvor verwendet, als ich Abhängigkeitsbibliotheken für WeChat-Miniprogramme geschrieben habe, um den Quellcode und den kompilierten Code zu kompilieren und einzufügen src bzw. dist zwei Verzeichnisse. Gulp verarbeitet alle Dateien unter src, konvertiert scss in css und verschiebt alle anderen Dateien intakt an den entsprechenden Speicherort unter dist.

Ich werde hier nicht auf Details eingehen. Den Code finden Sie unter Wux.

Option 2

ist sehr einfach und unkompliziert. Verwenden Sie die File Watchers-Funktion von Webstorm/IDEA für die Echtzeitkonvertierung.

Installieren Sie Ruby und sass

Stellen Sie sicher, dass die Versionsnummer angezeigt wird, wenn Sie sass -v in der Befehlszeile eingeben. Der Installationsvorgang wird ausgelassen.

File Watchers installieren

Im Plug-in-Markt suchen und installieren (überspringen, wenn bereits installiert)

Scss-Konvertierungsskript hinzufügen

Jetzt wird nach der Installation des Plug-Ins und dem Öffnen des Projekts automatisch der SCSS-zu-CSS-Konvertierungsassistent angezeigt, was viel praktischer ist. Es müssen jedoch einige Änderungen vorgenommen werden:

Ändern Sie beispielsweise das Suffix der generierten Datei hier.

Zweitens ändern Sie die Argumente in:

$FileName$:$FileNameWithoutExtension$.acss --no-cache --sourcemap=none --default-encoding utf-8 --style expanded

Wenn Sie --no-cache nicht hinzufügen, wird ein .sass-cache-Verzeichnis im selben Verzeichnis wie die scss-Datei angezeigt.

Wenn --sourcemap=none nicht hinzugefügt wird, erscheint eine .map-Datei im selben Verzeichnis wie die SCSS-Datei.

Wenn --default-encoding utf-8 nicht hinzugefügt wird, wird ein Fehler gemeldet, wenn die SCSS-Datei chinesische Kommentare enthält.

Stil muss hier nicht hinzugefügt werden. Der Stil ohne Einrückung und Komprimierung wird hier verwendet. Das Miniprogramm wird jedoch komprimiert, wenn es gepackt und freigegeben wird, sodass die Lesbarkeit hier erhalten bleibt.

Jetzt wird diese SCSS-Konvertierung nur auf das Projekt angewendet. Wenn Sie ein neues kleines Programmprojekt erstellen, müssen Sie es erneut hinzufügen (es wird nicht empfohlen, es auf „Global“ zu setzen, da dies leicht zu Unfällen führen kann Schaden).

Beachten Sie, dass sich unter der rechten Bedienleiste der Dateiüberwachungsliste eine Schaltfläche zum Importieren und Exportieren befindet. Sie können die aktuell konfigurierten Einstellungen exportieren und speichern. Sie müssen sie nur dann importieren, wenn Sie in Zukunft neue Projekte erstellen.

---

之后还有一个问题，如果我手动将编译后的css（即wxss或者acss，下略）文件删除，scss文件不改动的话，就不会重新编译出css文件。
或者万一监听失效或者不够及时，css还有可能是旧的。
所以还需要一个命令，用来将整个目录下的scss文件统一转换，确保没有遗漏和保持代码最新。

不过我看了半天sass和sass-convert的文档，没有找到一个可用的写法，能让命令行遍历指定目录下的所有scss文件，将其转换成css放到源文件所在目录，并且将后缀名改为wxss或者acss。

所以遍历这个行为只能交给nodejs来实现，代码如下：

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

var path = 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('获取文件stats失败')          return
        }        if (stats.isDirectory()) {
          mapDir(pathname, callback, finish)
        } else if (stats.isFile()) {          if (!['.scss'].includes(path.extname(pathname))) {            return
          }
          callback(pathname)
        }
      })      if (index === files.length - 1) {
        finish && finish()
      }
    })
  })
}

mapDir(
  basePath,  function (file) {    const newFileWithoutExt = path.basename(file, '.scss')    if (newFileWithoutExt.startsWith('_')) {      return  // 按照scss规则，下划线开头的文件不会生成css
    }    // exec可以让nodejs执行外部命令
    exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${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里添加一条script:

"scripts": {    "scss": "node build/scss-convert",
  }

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

Das obige ist der detaillierte Inhalt vonEntwickeln Sie ein WeChat-Applet mit scss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!