Develop WeChat applet using scss

The wxss of the WeChat mini program, the acss of Alibaba's Taobao, and the Alipay mini program are very similar to native css. However, I am used to using dynamic css language in web development, and it is very uncomfortable to write back to native css. Especially the nested writing method of parent-child style is very cumbersome.

Therefore, I hope to have an automated construction solution that can simply convert scss into a style language for small programs.

Option 1

I used it before when writing the dependent library of the WeChat applet. I used gulp to compile and put the source code and the compiled code into src respectively. and dist two directories. Gulp will process all the files under src, convert the scss into css, and move all other files intact to the corresponding location under dist.

I won’t go into details here, please refer to Wux for the code.

Option 2

is very simple and straightforward, using the File Watchers function of Webstorm/IDEA for real-time conversion.

Installing Ruby and sass

Ensure that the version number appears when entering sass -v on the command line. The installation process is omitted.

Install File Watchers

Search and install in the plug-in market (skip if already installed)

Add scss conversion script

Now after installing the plug-in and opening the project, the scss to css conversion wizard will automatically pop up, which is much more convenient. But some modifications are still needed. The configuration is as follows:

First, change the suffix name of the generated file. For example, my Taobao applet here must be acss.

Secondly, change the Arguments to:

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

If you do not add --no-cache, a .sass-cache directory will appear in the same directory as the scss file.

If you do not add --sourcemap=none, a .map file will appear in the same directory as the scss file.

If --default-encoding utf-8 is not added, an error will be reported if the scss file has Chinese comments.

style does not need to be added. The style without indentation and compression is used here. Anyway, the mini program will be compressed when it is packaged and released, so readability is maintained here.

Now this scss conversion is applied to the project alone. If you create a new small program project, you need to add it again (it is not recommended to set it to global, as it is easy to cause accidental damage).

Notice that there is an import and export button under the right operation bar of the File Watchers list. You can export and save the settings you have configured now. You only need to import them when you create a new project in the future.

---

之后还有一个问题，如果我手动将编译后的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",
  }

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

The above is the detailed content of Develop WeChat applet using scss. For more information, please follow other related articles on the PHP Chinese website!