Compile sass in the new twentytwentyone theme – WorPress 5.6

Changing something in a theme build and maintained by somebody else is not recommended. But you know this, you will lose changes when you update. Despite that there might be good reasons for doing so experimenting, analyzing etc. If you want to make changes in the new twentytwentyone themes stylesheet you will want to change the sass files and compile it to the style.css. This sounds complex but is very easy. The previous post already explained it for the twentynineteen theme and that procedure still works flawlessly.

The short version:

  • Install npm download
  • Navigate to the theme folder: /wp-content/themes/twentytwentyone/
  • Run the command: npm install
  • Make your change in the sass file
  • Run the command: npm run build
  • Your changes are now compiled into a new style.css

Other npm commands

  • npm run build:style
    update the style.css only
  • npm run build:style-editor
    update the style-editor.css only
  • npm run build:style-dark-mode
    update the style-dark-mode.css only
  • npm run build:rtl
    update the style-rtl.css only
  • npm run build:rtl-dark-mode
    update the style-rtl.css only
  • npm run build:print
    update the print.css only
  • npm run build:ie
    update the ie.css only
  • npm run build:ie-editor
    update the ie-editor.css only
  • npm run build:stylelint
    update the stylelint.css anf .stylelintrc-css.json only
  • npm run build
    update the everything
  • npm run watch (same as start)
    monitor the changes you make and compile the stylesheets everytime you do
  • npm run start (same as build)
    monitor the changes you make and compile the stylesheets everytime you do