This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

We will find that, if you do not use any language of pretreatment and we write code is a series of very long and messy or can I write this it is difficult to find the class name you want, so we use the language after preprocessing, will improve the efficiency of our development and code maintenance, the following content is to teach you how to use the gulp SCSS pretreatment of language processing. Don’t walk away from it. It can be used not only in applets, but also anywhere else.

Install gulp

  • Install gulp globallynpm install --global gulp-cli
  • Create a package.json file in the project directorynpm init
  • Install gulp as a development-time dependency
    • Install gulp dependenciesnpm install --save-dev gulp
    • Install modifies filename dependenciesnpm install --save-dev gulp-rename
    • Install sASS dependenciesnpm install sass gulp-sass --save-dev
    • Install no-sass as gulp-sass requiresnpm install --save-dev node-sass
  • Finally, the terminal enters gulpReady to run?It seems that you can’t run without the necessary configuration files.Keep reading

The configuration file

  • In the project directory, we’ll create a file calledgulpfile.js, the configuration is as follows:See the official documentation for more gulp configuration explanations
const gulp = require('gulp');
const sass = require('gulp-sass') (require('sass'));
const rename = require('gulp-rename');
const { src, dest, watch } = gulp;

const scssFiles = ['**/*.scss'.'! node_modules/**']; 

const compileSCSS = function() {
  // SCSS files in all folders, excluding components, excluding node_modules
  return src(scssFiles)
    .pipe(sass().on('error', sass.logError))
    .pipe(rename({extname: '.wxss'}))
    .pipe(dest('/', {overwrite: true})); // Put the compiled files back into the SCSS file directory
};

module.exports.default = function() {
  watch(scssFiles, compileSCSS)
};
Copy the code
  • Package.scss as.wxss, here is the write hot update file to package the output.wxss file, then go to the current project terminal and enter gulp, a simple package tool is done

Small program upload code filter *. SCSS file, avoid our small program package is too large

  • We need to find the filesproject.config.jsFile, and then inpackOptionsThe next property is calledignoreWrite regex to filter files we don’t need and reduce the size of applets upload packages, as in the following simple example:
"packOptions": {
    "ignore": [{"type": "regexp"."value": "\\.scss$"
      },
      {
        "type": "file"."value": "package-lock.json"
      },
      {
        "type": "file"."value": "gulpfile.js"}}]Copy the code

Possible runtime error and resolution

  • If you are install dependent"Gulp - sass" : "^ 4.0.0", your profilegulpfile.jsThe introduction of module custom variable sass can be writtenconst sass = require('gulp-sass')
  • But if you install dependencies"Gulp - sass" : "^ 5.0.0"And above our configuration filegulpfile.jsThe import module custom variable sass must be written like thisconst sass = require('gulp-sass')(require('sass'));Gulp sass 5 does not have a default sass compiler.
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
Copy the code

conclusion

  • If you still can’t, you can leave a message, the project will be pushed to Gitee, welcome to view or start~
  • If you want to see more small program content, you can also go to my wechat small program community to view, this article will be synchronized in the past