![]() ![]() ![]() In order to bundle these styles into the Webpack SASS build, I had to first disable the enqueued script in my functions. The CSS styles that support the Block Editor are served automatically by WordPress as a separate enqueued script. WordPress 5+ ships with Gutenberg, the new and improved Block Editor used for authoring content. I differentiated between a development build and a production build because setting the build mode to “production” provides extra optimization inside of Webpack 1: Including the Gutenberg Block Editor styles in the SASS build (Optional) With npm’s auto-generated package.json file, I added three script options as shorthand for the Webpack build and watch commands. Minimisation can make a script up to 20 smaller, resulting in a faster download time. Then I installed Webpack and the Webpack CLI: npm i -save-dev webpack webpack-cli The purpose of minification is to increase the speed of a website. Once inside, I initialized a new Node project: npm init -f I started in the root folder of my WordPress Theme (for me this was /wp-content/themes/taylor/). Incorporating Webpack gave me more control, the ability to work with SASS, and laid the groundwork for exploring code chunking in the future. Originally I was relying on code minification plugins in WordPress, but began to see some unpredictable behavior (plus I was dying for the ability to use SASS to style my site). The idea of using Webpack as a bundler has been on my mind since launching this site. I published an updated guide in July of 2022 on using webpack 5 with a WordPress theme. Versioning the JavaScript and CSS Assets.Loading the compiled assets into WordPress.Including the Gutenberg Block Editor styles in the SASS build Optional.Configuring the JavaScript Build with Babel and Minification Convert SCSS into prefixed CSS & minified CSS along with source map file automatically - on each file save.Using Webpack 4 and SASS with WordPress.Using Webpack 4 and SASS with WordPress Published ApOn This Page ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |