Wechat small program WXSS, Ali taobao, Alipay small program ACSS grammar is very similar to the native CSS, but in the web development used to dynamic CSS language, and then write back to the native CSS is not used to, especially the father and son style nested writing method is very cumbersome.

Therefore, I would like to have an automated build solution that simply converts SCSS into a style language for applets.

Plan 1

I used it when writing the dependency library of wechat applet before. I used gulp to compile and put the source code and compiled code into the SRC and dist directories respectively. Gulp processes all files under SRC, converts SCSS to CSS, and moves all other files to their corresponding locations under DIST.

I will not go into details here, but the code refers to Wux.

Scheme 2

Very simple and straightforward, real-time conversion using File Watchers Webstorm/IDEA.

Install Ruby and Sass

Ensure that the version number is displayed when you enter sass -v. The installation process is omitted.

The installationFile Watchers

Search the plugin market and install it (skip if it is already installed)

Add the SCSS conversion script

Now after installing the plug-in to open the project will automatically pop up SCSS to CSS wizard, convenient a lot. However, some modifications need to be made. The configuration is as follows:

First of all, we need to change the suffix of the generated file. For example, here my Taobao small program must be ACSS.

Second, change Arguments to:

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

If –no-cache is not added, 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 you do not add –default-encoding UTF-8, the SCSS file will report an error if it has Chinese annotation conversions.

Style does not add, here is used without indentation and compression of the style, anyway, the small program package release will be pressed, here to maintain readability.

This SCSS transformation is now applied to the project alone and will need to be added again if you create a new applet project (global is not recommended, as it is easy to accidentally kill).

Notice that there is an import/Export button on the right side of the File Watchers list below the action bar. You can export and save the Settings that are configured now, so that you can import them when creating a new project.

Then there is the problem that if I manually delete the compiled CSS (i.e. WXSS or ACSS, omitted below), the SCSS file will not be recompiled. Or the CSS may be old in case the listener fails or is not timely enough. So you also need a command to uniformly convert SCSS files across the entire directory to make sure there are no omissions and keep the code up to date.

But I looked through the sass and Sass-convert documentation and couldn’t find a way to run the command line through all the SCSS files in a given directory, convert them to CSS and put them in the source directory, and change the suffix to WXSS or ACSS.

So the traversal behavior can only be handed over to Nodejs, and the code is as follows:

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) => { // Read file information
        if (err) {
          console.log('Obtaining file stats failed')
          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  // According to SCSS rules, files starting with an underscore will not generate CSS
    }
    // exec allows nodeJS to execute external commands
    exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${file}:${newFileWithoutExt}.acss`, {
      cwd: path.dirname(file) // Not writing this will cause the generated file to appear in the root directory
    }, (err, stdout, stderr) => {
      if (err) {
        console.log(err)
        return
      }
      console.log(`stdout: ${stdout}`)})},function() {
    // console.log(' XXX file directory traversed ')})Copy the code

Add a script to package.json:

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