Configure Webpack 5 in Wordpress (2025) with Typescript and SASS

Key Takeaways

Good morning everyone. How's it going today? Um, today I'm going to be showing you how to bootstrap or how to kickstart your WordPress development environment and how to set it up to use um, Webpack and how to configure it to use TypeScript inside it and how to add SAS to it so that you have like a very professional um, development environment for your for your projects to kickstart. Uh so by the end of this video you will probably have like your own um boilerplate for WordPress that you can just like copy and paste and fork whenever you want to start a new project. So um and everything will be configured as you want it to um to create a new website or a new theme. Right? I have to specify that when I work with WordPress, I mainly mean that I'm creating custom and personalized themes, which basically is like creating the website. I don't really work with plugins and things like that. I just use WordPress as a CMS. All right, so that's what we're going to be doing right now. Um, so let's get right into it. Okay. Um, first of all, I'm going to be using uh I'm I'm going to be doing this on my local machine. So, I'm not going to be connecting to a server right now. And to do this, I'm going to be using local. If you haven't used local before, it's a great way to create your own website, uh, your WordPress website in your local machine. It gives you a PHP environment, um, a MySQL or Mariab, I don't know. um database that's already connected. It gives you a shell that you can access to. It gives you WP CLI as well that it's already configured. So you don't have to worry about anything. Just click a add new site button. All right. So let's get right into it. So the first thing I'm going to do is I'm going to start I'm going to create a new instance here of a website here in local. going to create a new website. There we go. And we're going to call it my awesome website. There you go. Let's see if we have some advanced options. My option. This is the URL that we're going to be using. And we're going to store it right here. There we go. So, continue. Um, what are we using? So, we're using MySQL 8. We're using EngineX and PHP 7.4. That looks good to me. If you want to use PHP, you can just click on custom. I'm just going to add like here my name and just a very secure password which is one to zero and it's not a multi-sight. And then just click on outside. And there you go. That's how fast and easy it is to create oh my password. That's how fast and easy it is to create your WordPress site on local. Um, so all right, now that we have our local site, it's already running. So we can just open it like this. Let's see what it looks like. So it looks like this. Um, and as [clears throat] you can see, it already has a theme that's running. And we, of course, we want to create our new theme ourselves. Um, so what we're going to do is we're going to use a boiler plate for that. And I mean, I don't recommend that you actually build the entire uh theme from scratch because it's just a lot of work and not I mean like it's not worth it. But you can let's use it like this. So it's underscores underscores me. And this is the one that I'm going to be using. There are many boiler plates. Um, but I just like this one. I think it's very simple and and and easy to use. So, what I'm going to do is I'm going to fork it into my site theme. All right. So, how do we do this? We go right here and we open the side shell. This is what I was talking to you about when I told you that it that it comes with a pre-installed shell. And right here, I hope you can see, I'm going to go inside my my WP content folder. So, I mean, this right here, as you can see, it's the entire WordPress uh installation, the the all the website right here. And so, what we're going to do is we're going to get into WP content. Uh, inside WP content, we're going to go to themes. And once we're there, you can see all the themes that we already have installed. What we're going to do is we're going to clone our this underscores um boilerplate. Okay. What this is, it's mainly just a regular WordPress WordPress uh theme, but it's like a very like clean and empty theme that you can just modify to make to turn into your own boiler plate. Okay, so that's what we're going to be doing. Um, so what I'm going to do is I'm going to clone that repository right here. And there we go. We have it right here. It's undersc my new theme. I'm just going to rename it. I'm going to call it um my awesome theme. And let's open it. There we go. Um so there you have it. Uh so here we have our theme. Let me just check my notes to be sure what you have to do right here. Um tech tech. Um so I mean um first I'll just explain to you what what's going on right here. Okay. Uh so first of all um let me move myself up here. So, first of all, we have like all of our directory structure is pretty similar to what we already have usually um except for the fact that we we also have a WooCommerce CSS. And if we see the package JSON, we can see that it uses SAS. Although this one right here uses node SAS, which is duplicated. So, we're going to have to be uh removing that and replacing it with a new with a good version. Um, what else do we got right here? We have right to left. Um, I mean, I'm not coding any right to left website for I don't know in Arabic or I don't know which other right to left languages there are. Uh, so I'm just going to be deleting this. Um, what else do we have right here? Um, we have Composer. I'm going to be leaving this as is, although in in another video I'm going to show you how to configure Composer for for WordPress. Right now, we're just going to be focusing on npm and Webpack. You have all your basic templates, 404, archive, comments, footer. Uh, you have a functions file that's pretty uh I feel that it's pretty clogged. Uh, I mean pretty I mean too crowded. Um, what else do we have? We have SAS right here as we're going to be using SAS but we're going to be using another plugin to compile it. And you have JS right here. We're going to be using TypeScript. So let's get right into it. Um, so first of all, we're going to have to clean this site. And to clean it, here we go. And to clean it, first we're going to have to to remove WooCommerce because I don't like WooCommerce. Um, I mean, this is, of course, we're not removing WooCommerce because we don't have WooCommerce. We're just removing the the files that interact with WooCommerce. And I think it's right here. They also have a set of functions that work with WooCommerce. And I mean, I don't know about you, but I don't really like using WordPress for e-commerce websites. We're going to be removing the style right to left CSS. Um, tech. Um, we're going to be removing, what else can we remove? Uh, we're going to be creating our own readme file later if we have time for that. Um, the screenshot for some reason it's just like an empty thing. It's I don't know what it is. Uh, so we're going to add a new screenshot. All right. How about that? So, I'm gonna go to pixels.com and let's just add like um a coding like a coding image. Let's add this one. I'll go for that one. And let's put it right here. There you go. So now I'm going to delete screenshot. I mean uh in case you don't know, screenshot is the image that's going to be shown in your in your B in your WP admin. All right. So now if I save this and if I go to my WP admin right here. Oh All right. Um I mean I usually like to just uh enable oneclick admin. That way I don't have to to to actually connect. So open right now. Now now I'm logged in. And here we go. Here we have an appearance. We have themes. And there is our theme which is underscores. Uh let's rename our theme, will you? Um, to rename our theme, we have to come here to styles and we just click right here and we change it to my awesome. Let's say our awesome because it's ours, right? Our awesome theme because we're building it together. There you go. And I'm just going to remove this. um an awesome theme for WordPress. And I'm just going to remove all of this. Um it requires PHP tech tech license text domain. I'm just going to leave that one like that. Tech and and uh there you go. All right. So now if we refresh here, we should have like our our awesome theme renamed. So there we go. Um, now I'm going to remove jetpack as well because I don't like jet jet jetack. And what else can we remove? All right. So let's clean functions.php as well. Uh to clean functions.php PHP. Since we're going to be using our own SAS and TypeScript files, I'm going to be removing the INQ scripts that they have by default, which are right here. So, I'm just going to be removing this. Oh, just going to be removing that. Um, what else? What else? What else? Uh, so we don't have WooCommerce. We don't have jetpack. There you go. And so just in case you don't know what's going on right here, um this is requiring the PHP files in the folder ink, which is just a way to modularize your files. Right? So what's going on is that instead of adding all this code to functions.php, we're just taking it and putting it into an INC file. and like a separate file as a module and we're just importing it. So I mean that's in order to to make things a little bit more readable even though even I mean still I don't really like this boiler plate but whatever. Uh so we have this and right now what we're going to do is tick tick tick tick tick um M right let's just activate the website and see how it looks. There you go. So now you have your very basic website but you already have your boiler plate which is very clean. You you can start building your own website uh your own theme on top of it and I would recommend that you keep this separate and and just fork it whenever you have to start a new project. Uh but still we we're not using TypeScript or SAS. So let's get right into that. Um what I'm going to do just to make things easier, I'm going to be using create app create app.deaf um which is just a very basic um app that's online and it allows you to create your own Webpack configuration and your own package.json JSON. Oh, we're also going to be deleting package.json because I mean we don't need any of this. Uh, let's delete this. I guess that's all. I'm going to be removing SAS uh because we won't need it, but I'm going to going to keep it there for a moment. Um, all right. So, let's just choose what we want in our project. Okay. Um, if you wanted to use React, I mean, I guess you can add it here, but I'm not going to add any library, any main library for this one. Uh, you can also add Bootstrap from here if you want. I'm not going to be adding Bootstrap. Um, but this file I mean this basically what it does is it'll give you the set of files that you need to import to your theme in order to use npm, TypeScript and SAS and whichever other plugins you want to add to it. So you can also add a test framework, but I'm not going to be adding a test framework. Even though I mean still, if you do want to test, I really recommend that you use u Cypress uh with WordPress. It's extremely useful. um as a transpiler, we're going to be using TypeScript and we're going to make it I mean TypeScript um compatible and we're also going to make it backwards compatible with ES5. Uh in case you don't know what Babel is, it basically takes all the ES6 uh functionality of um of JavaScript and makes it compatible with ES5, which is the old version of JavaScript. So you can use it in I mean so it basically just makes your JavaScript compatible with very old browsers. What else do we have right here? Uh styling. So we're going to add SAS. Um what else do we have right here? Are we going to treat images? Let's add that later. For the moment I think this is all that we need. Yeah, let's add a minifi. Yeah, mini CSS. So that this what this plug-in right here does is that it makes our end version of uh CSS be minified. So that I mean it's just all in one line and without spaces or comments. It just makes it way more uh concise and and I mean low weight so that your your website is faster. So there you go. Once you have your your files ready, you're going to click on download project, you're going to open it. And once you open it, you should have this file right here. Um, so you have a disc folder that we're not going to use. What we're going to be using is package.json, which includes um Webpack and all this configuration. And we're going to be using tsconfig.json. JSON and Webpackconfig.js. And these are the ones that we're going to be copying into our project right here. So, let's do that. So, first of all, I'm going to run package to copy package.json right here. There you go. I'm going to copy tsconfig.json as well. And I'm going to copy webpack.config.js. And if I'm not mistaken, this is pretty much all we need. Oh, we also need Babel. LRC. There you go. Um, so everything's running smoothly. What we're going to want to do right now is we're going to want to Oh, first of all, I'm going to reinitialize kit. Um, because remember that this to to get this web this um boiler plate, we cloned a GitHub repository from underscore s. So, what we're going to do is I'm I'm just going to remove the git file for that one. And I'm going to reinitialize uh git repository. There you go. So, now we're in a new git and I'm just going to commit it. Oh, just in case you don't know what I did here, this basically means git at all, but that's just an alias. Um, and let's comment our first comet. There you have it. So, now we have our first comet and everything is in uh what else are we going to do right now? We're we just added our new package.json. So, we're going to have to install it. Oh, first of all, let's see which version of Node I'm running. Apparently, I'm running Node version 16. Um, probably going to want to change that one. If you don't know how to use this, check out my video on how to use NVM and Node version manager. It basically just allows you to use different uh versions of Node. So, I'm going to change it to the latest version, which is 18. Latest stable version, which is 18. And it comes with APM 8. So, let's see. We have npm version 8. There you go. Um, so once we we're using the latest the latest version, I'm just going to npm install everything that's in my package.json and let's see how that works. This is probably going to take um just a couple minutes, but in the meantime, I'm going to show you that this right here is creating uh our node modules right here. Uh I mean, it'll appear in a moment. And also it's going to allow us to use this scripts right here. Okay. Some people like to use Gulp instead of Webpack. Oh, now we have it as I told you node modules. Some people like to use Gulp with especially with WordPress instead of Webpack. But I just feel Webpack is way more straightforward and easy to use. and I just use it with a combination of Webpack and npm scripts. What npm um scripts are, uh it's the ones that allow you to run scripts just by doing npm run and then you click on you you use any of these that you want. Let's say that we want to use build def. Um and what that's going to do is this is just an alias for Webpack mode development. So, it basically means that it's going to um it's going to run Webpack and bundle our assets. Okay. Uh let's see. I mean, it's probably not going to work because we haven't um All right. So, interesting thing. Um Webpack um comment not found. What's going on right here? So what is happening right here is that Webpack is a development dependency as you can see it's in dev dependencies and we're trying to run it. Uh what is happening when we try to run it? When we try to run it um basically npm is looking for a binary which is an executable inside node modules. And here we have Webpack CLI, which is where you should find your your binary. And then you open it, but it seems to be empty. And the reason for that is that we're probably running in a develop in a my local environment is set to set to production for some reason. So let's see. Echo node enth. And indeed, my environment is set to production. So if my environment is set to production, that means that when I run npm install, it's just going to install the the the dependencies which are none and not the development dependencies. So what I want to do is I want to change my environment to development. Oops. And right now if I do npm install, it should install all my development dependencies uh as well. Let's see if that works. Yeah, it seems to be working now. They're not empty anymore. There you go. So, that's a good point. I mean, uh, when I didn't know this, I spent like countless hours trying to debug this just to figure out that the problem was that I was using a production environment instead of a development environment. So, let's wait for it to work. And once it's working, while it's installing, I'm going to give you a tour of our Webpack file. So what is going on right here? Um, basically we are wait a minute. Basically what's going on is that we are telling it to go look for a file in source index.ts. And that basically means that it has like it's going to look for index.ts in source um let's see do we have a source directory here? We don't. So it's probably going to return an error. Let me just show you how it returns an error. Um so if we do npm run builddev as I told you before it's going to run webpack in mo in development mode and let's see how that works. Um so as we as we were expecting it there is an error because it cannot resolve source index.ts. So what we're going to do is we're going to create it. Um so let's do that. Let's add source directory. And you know what I'm going to do? I'm actually going to create two folders right here. I'm going to create one for JS. And I'm also going to create one for uh CSS. Uh I'm going to call it SAS actually. And this one I'm going to call it TS. There you go. So right here I'm going to create a new file called main.css as CSS because we're going to be using SAS. And let's just add, you know, body background color. Let's set that one to red. This is going to be our C main CSS file. I'm just going to This is just a very simple test. And inside ts I'm going to add main.ts. Right? And in here we're going to add a console log hello world. And again this is just to test, right? I mean we're just going to test that our Webpack is working. Okay. So, let's come back to our Webpack file and let's say let's tell it that let's um let's just update it so that it knows where to look for our source files. This right here is what's going to be bundled into our minified assets that we're going to include in our WordPress theme. So, that's how we're going to be using SAS and TypeScript. Okay. So, what we're going to be doing here is we're going to since we have two of this, actually, what I'm going to do, Since we have two of this, I'm going to add an object right here instead of Oh, instead of this. There we go. I'm going to add an object right here. I'm going to I'm going to call it main. And I'm going to add a couple of things right here. First of all, we wanted to look for source ts, which is this one right here. And we're going to want it to look for main.ts. There you go. And secondly, we want to add another point of entry, which is going to be source SCSS, which I know it's SAS. And it's going to be, you know what, I'm just going to rename it SCSS. I don't know why I named it SAS. And we're going to name it main.css. There you go. So now we have our two main points of entry which are main.ts and main.css. And right now and now we're going to have to set set up the output. Where do we want the output to be? Um I mean I'm just going to run it like this just to show you. It's I'm pretty sure it's supposed to be working right now. So let's see. npn run build def. Oh config. It ran successfully. such a such a pleasure when that happens for the first time. Um, so that basically what it did is it created our directory called dist and it added bundle.js and main.css. And as we can see we have body.background color red and all of these things for our bundle.js. Now you might be wondering um, mate, aren't you isn't this supposed to be minified? The response to the answer to that is no because we're running on a development environment. I mean we're running Webpack as in development mode. Remember the the command that we ran is npn run build which if we come here to package.json it mean it's running Webpack mode development. But if we want to run Webpack in production mode, um we can just Oh, all right. We can just change this to prod. And this is going to run it in production mode like that. So let's do that. So it compiles successfully. And now if we look again at our file, it's minified. I mean, it's just all in one line. And bundle.js, it's also all in one line. So that seems to be working pretty good. Um, but I'm going to be using dev. Um, and just to show you, uh, very quick as well what the script is doing. Um, right now I run build pro. And just to show you that that's actually just an alias for this, I can actually just run webpack mode production and it's going to do it's not going to do the same thing for some reason. Um, npx Webpack and it ran it did exactly the same thing. Okay, because it's running it through npm. Um, so yeah, it's just an alias for running Webpack. And there we go. Um, so now that we have this, I'm actually going to modify it our Webpack file to make it more um, ready to use. So I don't want it to be called bundle. I'm going to be I'm going to call it main.min.js. So there you have it. And I don't want it to be in a folder called dist. I want it to be in a folder called assets. So there you have it. So that's we changed our output. So now we have the output is going to be assets and main.j uh main.js. Now if I run this, it's not going to work. Why? Let's see. Right. If I run this, it's not going to work. And the Well, it apparently did. Uh, what happened here? Assets main.js. All right, it apparently worked for some reason. Um, but all right, just in case, you should be using where where is my TS config? Here it is. You should change this right here to assets. Um, because this one is the TypeScript file that's going to be dealing with TypeScript. I don't know why it actually worked. I I don't know what's happening, but uh just to be sure, change it right here as well. Not only on Webpack. Um so there we have it. Uh I'm going to remove now our disc and I'm going to remove the assets as well, just to show you that every time you run it, it's going to rerun everything exactly as you as it should. And now you can just import it. There you have. And now you can just encue it to WordPress. Uh so that's the way to use uh SAS and TypeScript and just in production what you have to do is just um automate the fact that npm run build prod is automated in your pipeline so that it's actually it builds your assets whenever you want whenever you need it need them to be built. This is extremely important because some people do this in local um I mean in their local machine. There are some plugins for running SAS and compiling SAS and things like that. I mean you can just run and compile it right here. But then when you have to run to to move your code to production, it's not going to be updated. I mean it's just going to upload SAS. So that's why you want to have an npm script that bundles your files together so you don't have to do it manually. So now every time you you commit it to production, it's going to run npm run npm run uh build prod and that's going to uh generate your assets and everything's going to work with SAS and TypeScript. Um what else do we have here? Let's let's pump this one up a little bit more. Um, so there we have it. Um, now right here, I can change this to main. Um, I can put this right here and say name instead of main. That way it's going to it's going to use this this name right here instead. I mean, it's going to be the same exactly, but just just to show you. Um, you know what we're going to do right now? We're going to add an image right here. And tech. Let's say uh where is how do we add images as well to our Webpack thingy? Let's say we want to add an image to our to our CSS file. And let's say that we want to import it right here. Um I'm going to add an image that's going to be background image. I'm going to use I'm going to use tech tech. Um I'm going to use remember remember to use uh relative paths to import your images in SAS. I mean in this setting it's going to be completely automated. Um, and now we're going to add it in in in in we're going to add screenshot.jpeg. Right now, if we save it and we rerun production uh the build, you can see that it created a new image right here and it added it to our assets. And if we see our main.css CSS that's minified there is this weird name for the image and that's actually referring to this image right here which is the screenshot I mean the image that we had imported so it's not actually using the image right here it's using another image in assets um and this is something that you that I mean you could leave it like this but if you have like a ton of images they're all going to be like in the same place as your main CSS and main main.js and you probably not you probably don't want that. So what we're going to do is we're going to configure Webpack to put your images inside another a new directory inside assets. And to do that I'm going to be adding this part right here. Um tech let's add styling. Let's add support for PNG images. And let's add SVGs as well. No, you know what? I don't like SVGs. Let's just PGs. Uh, so we're just going to copy this part right here, which goes all the way till up here. And now we're going to paste that one right here. Where is it located? It's after CSS. Let's add it right here. It's just a new rule for Webpack. And it's going to be using URL loader. And it's going to be using it's going to be taking the image.png pgs. Um, now if we already added this one, we might need to update. I'm not sure, but we might need to install something in npm. So, let's see how our package.json changed after adding this. Does it change? Yeah, it does. So, we have to install URL loader. Let's do that. Is it a development dependency? Yeah. So, I'm going to add it as a development dependency with capital D and URL loader. Now, we're installing URL loader and we're adding it right here. And then what we're going to do now is you know what? We're not going to be using actually. H one thing. I wonder if we actually need this one because we can actually do it without it. Yeah. You know what? We're going to bring this one right here. Let's see how it works. This is going to add support for all of it. Not only for all all images and not only PGs. So, let's take this one out. Tag. And let's add this right here. So, it's going to test for PGs, JPEGs, and GIFs. And we're not going to be naming it using it just like a an image. We're just going to call it asset resource. And let's add generator. Let's add a generator. And it's going to here, right here is where we're going to say where it's uh supposed to to send our images to. Right. Um so let's say that we wanted to All right. Let's see how this one right here works so far. Right. Um so nothing has changed. We we still have our image right here. Let's rerun it and let's see how that works. All right. So nothing has changed. Everything's still the same. What we're going to want to do right now is tick tick tick tick tick tick. We're going to put the image inside the the another directory that we want. So, uh to do that, we're going to say we're going to specify a file name for this output. And this is very simple. You just have to write the file name that you want to add. And basically dot slash we're going to say that it's going to be in the same output directory, but instead of just being there, we're going to add a new directory called img for image. And let's add it right there. But we also don't want it to be like all this weird code name. So let's add name right here. And let's add the extension afterwards. These are just uh Webpack um uh codes that you can use to to fill in your your configuration file. This one will take the name of the image and this one will take the extension and just add it inside and just add it into the image folder. Right? So let's run it again and let's see how that works. And what happened? Oh, sorry. There. Now, let's add it again. Let's see how that works. There you go. And so, it created our new image thing. And it created our screenshot.jpeg. And if we see right here, it's now imported at screenshot.jpeg. And it has the right path, which is um it updated the path automatically, which is just slashimage/image right here. So, it was all made automatically. You didn't have to u like configure your paths to your image and all. It was all done smoothly without you ever touching it. That's pretty cool, I would say. And but there is a problem right now. And the problem is that we still have this weird file right here inside our assets. I mean, we can just delete assets and just rerun uh our build. But we don't want to do that every time we want to we want to run our um we want to build our project. So, what do we do? What we do is we we we're going to add another another param right here to our output. [clears throat] We're going to say that we want it clean and we were we're going to set this to true. We save. And what this is going to do, it's going to remove all the previous files that that were not uh generated by the current bundling cycle. All right. So if I now that I have my clean setting to through uh to true, I can rerun build pro and as you can see now I only have the files that were bundled in the current cycle and the other weird one that we had there. It has just been deleted because we're not using it in our current bundle. And as just as I showed you before, you can just delete assets and you can just rerun build prod and it's going to go come all back again right here very neatly and very beautiful, very very well organized. There we go. So now that our main CSS file is here and our main.ts ts file is here and our assets are up here. We don't really need this JS and SAS thing right here. I'm just going to show you how to use SAS um um to import your and organize your files. Um I mean but you basically just do this. Let's say that you have your SAS right here and you want to add a new file. Let's call it um my components. And inside here you want to add um the specific uh CSS file for a particular component. Let's say it's um let's say it's the home the hero. Oh All right. Sorry. Um rename rename it to hero.css. And now all you have to do is come here and import it. Um wait I have to remember. Yeah. hero and then just add it as components hero. There you go. So now this right here is going to import your hero.css. You know what? Let's add this to hero right here. And let's change this one to um hero. And this right here, what it's going to do is it's going to now it ran and it included our hero setting right here. So here we have our hero and all that. That's just a method to modularize your SAS files to make this more organized. Remember to keep it all in separate um files and separate modules so that it's easier to maintain and to to update in the future. What else can we do to make this file amazing and this boilerplate like amazing? Um there's one more thing you can add a dev tool um for the source map. Uh so let's do that. Um, so right now if you're running produ uh if you're running build pro, I mean everything in your I mean when you go to inspect your website and you want to see where a particular CSS line or a particular JS line is in order to debug it, it's always going to say that it's in the first line because if you come right here, everything is in one line. Everything is in one line for our minified assets. So you don't want to do it like that. So, you probably want to add a a map to your I mean to this file in order to know where your files are. Uh I mean in which line the bug was happening. So, in order to enable this map, we're going to have to come right here and add a new dev tool. And we're going to set this to source source map. There you go. And right now, if we rerun this right here, it's going to create our maps for our file. So now we know in which line it's a certain line, a certain bug is happening when you want to inspect on the Chrome developer tools. So there you go. There you have it. What else can we do to make this even more more useful and more neat? Um, how about we add a watcher? Uh, so that every time you save it, it's going to be automatically rebundled. And to do that, what we're going to do is we're going to add a tech tag. That one we're not going to do it in Webpack.config, but we're going to have to add it a new script to our package.json. And to do that, we're going to tech. In here, we're going to add a script that's going to call be called watch. And what it's going to be, it's going to basically be Wait a second. Tech. Wait a second. right here. So, what we're going to do is we're going to add I don't remember which line it was for it. Um, what's the script that we have to use, right? So, it's this one right here. You have watch and just add this right here. Webpack progress. I mean as usual but you have to add this watch and then you can add the mode production. It doesn't matter if you add production because we already have our map. So even if it's minified it's going to get tell you where in which line the any line is happening any any line is coming from uh for JS and and and CSS as well. So there you have it. And now if we do npm run watch, it's going to be watching our files. And every time we modify one of these, so let's say we modify our main.css and we add a new a new rule for H1, for example. Let's say that it's going to be uh nope, not resize, but font size. And let's set it to 4:00 a.m. Um, and once we save it, you can see that it's being reloaded. I I haven't touched the terminal myself and I haven't run npm run build. But if we come right here, that H1 font size form, it's already there. It was uh it was compiled automatically just when I hit save right here. So that was the watcher. I hope it was useful. So that's how to use SAS and TypeScript in your theme. But there's a problem right now. We already have we're already compiling everything, but we are not using it yet in our theme. So let's go right back to our options uh to our functions.php file. And whatever you want. I mean, obviously, if this is going to be your boiler plate, you're going to have to organize this a little bit better. maybe take all of these things and put them inside another file in ink, but I'll let you do that yourselves. I mean, you can do it as you wish uh as how you feel that it's more organized, but I'm just going to add a function that's going to encue my awesome scripts. And this one right here is going to Oh, right. Sure. You cannot add dashes to to a function in PHP. So, right now we are going to WP enq. We're going to incue a style and we're going to incue our main.css. And to do that, we're going to we're going to we're going to say that scripts uh no style. Uh we're going to say we're going to give it a source which is going to be get um theme I your eye if I remember. Get theme. Which was it? Um, no. Get stylesheet URI. Uh, if I'm not mistaken, I think that's it. And then I'm going to add to it. I'm going to say it's inside assets. And inside assets is in main. CSS. Right. The dependencies, there is no dependencies. The version, that's an important thing. I'm just going to set it to false right now, but I'm going to show you a quick little tip for that in a moment. So, that right here should incue this right here should encue our our um wait, what's going on right here? This right here should encue our main CSS thing right here. But we should still call it inside an action s. No, not as add action. And we're going to call it WP. I think the I think it's in scripts that you have to plug it in. Not sure. Let me see. Where were they? Um, where are they adding it? In Qcript. Uh, developing Qcript. It's not it's not it's this is the name of the hook. All right. So this is the one. There you have it. And now we run the function which is my awesome my awesome scripts. And now, if I'm not mistaken, this right here should should add our main CSS file to our theme. So, let's go let's take a look into it and let's see if it's working. Um, right now um what is happening here? Failed resource. So, it couldn't find it for some reason. Um, themes main CSS. For some reason, it cannot find it. So let's see what's happening right here. Uh so we're including chick. Let's see um style. We're including uh link tick tick tick application my awesome. There you have it. My awesome. Includes uh themes my awesome. There you have it. Themes my awesome dele content. Uh for some reason this is not finding its way. So yeah this is not finding its way. So all right sure because this one is returning style CSS. Sure. Yeah. Sorry that was not the actual function that you have to use. It's not get sty. is get theme URI if I'm not uh root theme get parent theme I don't remember which it was um how do you do you remember guys how to import a how to incue a theme uh stylesheet let's see where it Um, where do we import it? Where do we import it? Get template directory URI. It's not get thing URI. Get template directory URI and then just add the assets. Let's see how that works already. Um, there we have it. So, is it working now? Uh, it seems to be working. Um, so we have our main.css which says that the hero background color is red, but we don't have a hero. So, let's let's just for testing, let's modify our source file right here and then modify my CSS. And instead of saying that we want the hero to be red, we want the whole body of the file to be red. Um, background color, let's say red. So, let's see if that worked. There you have it. So, now you have you have it. We're using SAS in here and it's being updated. I mean, and we can use all the SAS functionalities, right? We can just add that inside body we want. Let's say that we want the site title. The site title to be color um let's say blue. And right now this well that's already all right. So let's not set it to blue. Let's set it to yellow. There you have it. So now if I refresh and this one right here for some reason it's not turning yellow. Um all right. So let's say that it's it's the there you have it. So it's yellow now. So we're using SAS right here and it's it's already updating in WordPress. So that's how you use SAS. And let's just just finally let's just incue our script script. And then we're going to call it script. And it's in the same position, but it's not main.css, it's main.js. And there you go. So now our main.js is supposed to be saying hello world. So let's reload this and let's see if we see hello world. And there you go. So we have hello world that's running from a TypeScript and we have our background that's changing from a SAS file inside WordPress. And all of it is done with Webpack. That was pretty long. I was expecting this to be faster. Um, what else? I had one more thing to show you if I'm not mistaken. Uh, main CSS. No, I guess that's it. Oh, yeah, sure. Um, let me just Yeah, no, I think that was it actually. And yeah, so right now you have like your entire theme that you can start to customize. You can start to create your own templates. you can start to create your own um files in your own SAS files, your own TypeScript files and you can use them in your theme and you will be able to use them whenever you want. Uh just fork this new boiler plate that you have created that you already use Webpack with it. And when deploying it, be sure to run be sure to run inside your your pipeline, be sure to run npm run build prod so that all your files be bundled together. Um, I'm just going to remove this one right here because we're not using these two, right? And I think that that's pretty much there you have it. So I hope you enjoyed this. I hope this was useful. I will be posting uh this repository. I mean if you just want to copy the already finished version of this theme, I will be uploading it to GitHub and it will be available in the description. So, be sure to to check that if you don't want to to actually do all of this that I did uh during this last 57 minutes, which was more than I expected. Um, and just uh and just copy it if you want. Um, I mean, forkit and just use it as your own boiler plate. I hope you enjoy this. I hope you learned something new and I will see you next time. [music] [music] [music]