How to include a CSS file in an HTML file without the need for webpack

I've encountered a challenge while working on my Electron project and using Electron-packager to package the app.

The issue lies in the folder structure, where CSS files located in the parent folder of the Electron project/package.json are not getting copied to the packaged application.

This is how my structure looks like:

- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc

I develop apps within the 'Demo' folder. However, moving the 'GUI' folder inside 'Demo/Demo2/Demo3' would be redundant as it contains the exact same files.

Unfortunately, electron-packager does not support packaging files from outside the 'Demox' folder directly.

Suggestions have been made to relocate these CSS files to the node_modules directory instead.

The dilemma now is how do I properly require these CSS files from the node_modules folder into an HTML file without resorting to using webpack? I prefer to keep it simple and avoid setting up webpack unless absolutely necessary.

If you're interested, here's the question I posted on Electron-packager GitHub for more context: https://github.com/electron/electron-packager/issues/1089

Thank you!

Answer №1

Managed to find a solution at last.

After relocating the node_modules directory to the main root (C:\node_modules, making it accessible to all node projects on the C: drive), I utilized an absolute path and linked from there:

<link rel="stylesheet" href="/node_modules/sample-css/button.css">

Suits my requirements perfectly.

Appreciate the help from everyone.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

Designing stylesheets for larger screens to optimize the layout

I am currently working on the front-end design of a website and could use some assistance regarding element sizing. While the layout and elements look great on my 19-inch, 1440x900 resolution monitor, I noticed that everything appears tiny when viewed on a ...

Are There Data Racing Issues in JavaScript?

Imagine executing the following code snippet. let score = 0; for (let i = 0; i < some_length; i++) { asyncFunction(i, function() { score++; }); // incrementing callback function } The code above may potentially lead to a data race issue where two ...

Looking to find a way to compare two CSS class attribute values using XPath?

After reviewing the answers to the questions regarding how to target elements with multiple classes, I came across this solution: //div[contains(@class, 'class1') and contains(@class, 'class2')] However, I have concerns that this meth ...

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

Switching chart types in ChartJS doesn't function properly when transitioning from a pie chart

My goal is to create a dynamic chart that can adjust as the data changes and also be able to switch between different chart types such as line, bar, or pie. I have made some progress already, but I have run into several issues. One major problem is encoun ...

Display files stored in an array using MongoDB

I am trying to generate new documents that contain only the content of the activities. I have explored the possibilities with $project and $unwide, but have not been able to achieve the desired outcome. Below is the MongoDB query I am currently using: c ...

Tips on customizing the navigation bar color in Bootstrap

Is there a way to update the CSS in Bootstrap 4 to customize the color of the navbar? I'm having issues with my code. Can you take a look at it? <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> ...

Insert multiple hyperlinks into a text field on a separate webpage and store them individually in a MySQL database

Within my PHP file, I have an HTML form that includes a textbox where users can enter multiple links. For example: www.4shared.com/video/UryixZ7l/Puppy_loves_ringtones.htm www.4shared.com/video/UryixZ7l/Puppy_loves_ringtones.htm www.4shared.com/video/Ury ...

Having difficulty aligning the button in the center

I encountered an issue trying to center a button, I attempted to use text-align: center, but it didn't have the desired effect. .regis-btn { border-radius: 0px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o ...

Unable to install Vue-Cli

Currently running node 11.2.0 Continuously encountering this issue. Andrews-MacBook-Pro:vueTutorial aharris$ npm install -g @vue/cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee6e1ebe5cebba0bea0ba" ...

The state of the Toggle Button in Material UI

I am currently working with Material UI's ToggleButton and ToggleButtonGroup components. However, I'm facing an issue where the ToggleButton remains highlighted even after clicking on another button in the group. While the buttons are registering ...

Error encountered during NativeBase setup/installation

I have been attempting to install Native-Base in my React-Native project following the steps outlined in the official documentation. However, I keep encountering an error during the setup process. Command: npm install native-base --save Error Message: np ...

The Express JS route seems to be malfunctioning, as it is returning a 404 error for unknown reasons

I have a link that's supposed to direct me to a page, but every time I click on it, the address changes correctly, yet I end up with a 404 Not Found error. app.js var express = require('express'); var path = require('path'); ...

After upgrading from Vuetify version 1.5 to 2.0.18, an issue arises with modules not being found

I encountered the following error: module not found error To address this issue, I took the following steps: Commented out import 'vuetify/src/stylus/main.styl' in the src/plugins/vuetify.js file. Added import 'vuetify/src/styles/main. ...

What is the best way to exclude an external HTML file from being displayed on the home page?

shopping_cart.php <div id="main-container"> <div class="container"> <span class="top-label"> <span class="label-txt">Shopping Cart</span> </span> <div class="content-area"> <div class="con ...

Storing information within an asynchronous Mongoose loop

I have an array that I want to loop through and save each object inside it in the "mongo" database. However, nothing seems to happen because Mongoose is an asynchronous module. How can I utilize the "async" library to solve this issue? Here is a snippet ...

Adjust the regular expression to accommodate uppercase letters and incorporate numerical values

I've been using this regex expression for an input pattern in HTML that covers a range of URLs and IP addresses: ^(https?://)?[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/?$|^(https?://)?([a-z][a-z]+\.)+[a-z][a-z]+/? This regex ...

When attempting to access the user information using the Axios library in a React application, a 400 error (Bad Request) occurred for

Currently, I am working on a project using the MERN stack. My goal is to display a single user's data on their own dedicated page. The route functions correctly on the server-side in Postman as I can successfully retrieve the user by their ID. However ...

How can I make columns with a max-width expand fluidly?

I am currently using a fluid/responsive column layout that looks like this: .row{ float:left; max-width:960px; width:100%; } .column{ float:left; margin:0 15px; } .column:first-child{ margin-left:0; } .column:last-child{ mar ...