When I try to import a css file into the main.scss file: @import “~lightbox2/dist/css/lightbox.min.css”;
…I get an error and it fails to compile, although the error is vague to me, and Webpack seems to have the correct loaders in place, granted I left it stock to what Sage 9 has it at. I tried adding the images into the images folder as well and that didn’t work…I think it is asking me to import it like a module in the sass file: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument must be of type string. Received undefined…how would that work if it is a scss import or can I do this by importing the css file in the main.js entry file?
I’m using Sage 9.0.10…is it recommended to use the updated branch?
I think a loader would probably be the quickest fix but I’m not sure how to look up a good one, nor to which or where in Webpack config to add it…the entry is in a scss file so I’m thinking there…but binary blob? I looked at the yarn package site and there was a few not sure which to choose…
Whatever you did in your updated branch was brilliant. It fixed my issues, importing modules from node_modules worked as I expected. I’m still learning Webpack so it helped me a lot. Are you one of the maintainers?
The experience I had in the last few hours working with your updated branch vs Sage’s current solution was the difference between night and day. Your branch solidifies my belief that this theme is what WordPress theme designers need and it should be the main method of shipping themes to clients, not via page builder plugins with its rendering glitches and poor support at premium price.
I want to pick up a framework like Sage and start hacking away at my theme for my client, not doubling down and losing time on hacking Sage to work + plus struggling to finish the client project and inching closer to the project deadline.
Anyway. I hope Roots/Sage keeps doing what they are doing, I know it’s not easy, but it is appreciated. Is there a sponsorship program to donate to the project on a monthly basis?
If I understand you correctly you mean that you need to change the BrowserSync configuration.
For Sage 10 it is located in the webpack.mix.js file:
Replace sage.test with the URL the locally developed site is reachable, e.g. my-site.localhost.
By its default configuration BrowserSync will use localhost and a random, available unprivileged (above 1000) port for proxying and open the default browser pointed to it.
I’m at the point where I am now done with the project and I’m trying to deploy the theme to a VPS server…I’m trying to do a simple git deploy…I get the files in the correct directory on the server…
I’m issue is the commands to run next…I run ‘composer install’ and it seems to do fine…the docs says something about copying over the ‘/dist’ file that sage dev-master uses public, so I assume the docs are not updated…but when I activate the theme I get the white screen of wp death…yarn “build:production” also doesn’t seem to work which I don’t understand…I have all the packages installed.
So you are not using roots.io Trellis (it could be very useful for managing a WordPress VPS, but you need a fresh one).
The theme build process (npm run build/npm run build:production) should run on your workstation/build/CI server, it isn’t a good idea to build on the production system. The production system should be as simple as possible. After building the theme, one would zip/rsync the built theme files and send them to your production system.
composer install is necessary to install the theme runtime/dependencies. This can be run on the production system.
The node_modules folder is only used for building the assets using nodejs-based tools (like webpack),
it shouldn’t bei included in the theme!
Run composer install before activating the theme. But as I see in your latest post, you are zipping the theme - so you can also invoke composer install before zipping and adding the vendor/ folder to the theme ZIP.
Does this theme ZIP build script help you (pick the one for the right Sage version (9 / 10))?