Roots Discourse

When an imported css file refers to an image in a node_module folder

sage webpack
#1

Screen Shot 2021-03-11 at 12.53.17 PM
Screen Shot 2021-03-11 at 12.53.17 PM2804×942 807 KB

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?

Thank you all in advance.

Adrian.

#2

Is this Sage 9 or 10? Are you using the Sage 9 update branch?

You are importing a binary/image file. Maybe a loader is needed for properly storing it as a JavaScript variable (base64; svg-text encoded; binary blob)?

#3

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…

#4

How do you want to use that imported image? Pass it as an icon? Just include it as a HTML <img?

The update branch could help as it contains lots of updated packages.

#5

I’m trying to import a css file from node_modules but in the css file there is a reference to an (images/loading.gif) that apparently causes in error…all I know is the screenshot I posted in original post. I’m just trying to implement a Lightbox gallery plugin in my theme (I tried using existing plugins but they collide with some javascript code I already have, I’m digressing)…

#6

I’m downloading the package and seeing if the updates work. I think current sage 9 uses an older form of Webpack? Is this correct? And your branch uses Webpack 5?

#7

Correct, the update branch uses webpack 5 and the latest dependencies.

As you want to inline a binary image, the webpack loader needs to be configured/used to do so:

#8

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?

#9

No, I am a contributor, but not a maintainer.

You may also want to try out Sage 10 which is in dev-master.

Sage belongs to Roots which also has the Roots Foundation.

You can also donate to them on Patreon: https://www.patreon.com/rootsdev

#10

Do you know if they have those webpack issues fixed as well? It seemed like sage 10 was not production ready according to some of the issues.

#11

It should also be fixed with Sage 10 as it uses newer dependencies, including Webpack 10. It is a bit different as it uses Laravel Mix for simplifying the webpack configuration.

#12

Did you say Webpack 10?

I tried installing dev-master and Laravel Mix is new to me. It says to update it with my local url but it is not clear to me how to do that nor does it give an example.

#13

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.
#14

Yes this is what I needed, thank you. I really love what is happening with the dev-master branch for Sage. This is the kind of workflow WordPress needed from the beginning.

#15

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.

#16
  1. So you are not using roots.io Trellis (it could be very useful for managing a WordPress VPS, but you need a fresh one).
  2. 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.
  3. composer install is necessary to install the theme runtime/dependencies. This can be run on the production system.
#17

NPM not Yarn?

Ok the process:

  • npm run build
  • npm run build:production
  • .zip the project folder (what do I do about the node_modules folder? I tried uploading the theme zip and Wordpress said it was too big.
  • do I run composer install before or after activating the theme?
  • is there anything else I’m missing?
#18

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))?

#19

Thank you. I ran the script, although I’m not sure why it still says the zip file is too big. It’s a fresh digital ocean droplet…maybe I need to adjust some server settings?

Screen Shot 2021-03-30 at 3.28.49 PM
Screen Shot 2021-03-30 at 3.28.49 PM2416×312 20.7 KB

#20

I raised the file upload limits following this tutorial (https://websiteforstudents.com/fixing-413-request-entity-too-large-with-wordpress-nginx/) and still no go. I know the zip file it generated is only 8.2mb…so maybe it’s my server set up :confused: