I am working on an Electron project and using Electron-packager to package my app.
However, with my current folder structure, all CSS files located in the parent folder of my Electron project/package.json are not being copied to the packaged application.
This is my structure:
- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc
I build apps while inside Demox folder. Problem is I can't move GUI folder to inside Demo/Demo2/Demo3 since it will contain just the same files and it would be redundant.
However, electron-packager does not support packaging of files from outside the actual Demox folder.
It was suggested that I move these CSS files to node_modules instead.
But how do I require these CSS files from the node_modules folder to an html file? Is there any other way WITHOUT using webpack? I'm hoping to keep this simple and stay away from setting webpack up unless I have no other choice.
For reference, here is the question I posted on the Electron-packager github:
https://github.com/electron/electron-packager/issues/1089
Thanks!
Was able to come up with a solution now.
Since I have moved node_modules folder to the very root (C:\node_modules, so it can be used by all node projects residing in C: drive), I just used an absolute path and link from there:
<link rel="stylesheet" href="/node_modules/sample-css/button.css">
Works well for my needs.
Thanks everyone.
Related
Im trying to learn sass and JavaScript using VS Code. I created an app folder that holds my js folder which contains my script.js and scss folder that contains my _globals.scss. _header.scss, _variables.scss, and style.scss. I created a dist folder that contains my style.css and style.css.map. I have my html linked to my dist/style.css but I cannot get any of my pages to connect to my html page. I have the #import variables, globals, and header set in my style.scss page but the only styles I can add to my webpage is from the html document itself.
I’ve tried very little because I’m new to web development. Working from a MacBook, I downloaded homebrew, git, and a couple other apps I saw on YouTube. I tried changing my #imports to #use and adding them directly to the style.css but that did not help.
I was expecting by downloading any of those files would get my pages to communicate with each other.
Are you trying to import the .scss files on your styles.css? If so, this is not the right way to work with sass.
To be able to "transform" the .scss files into .css, you have to compile these files using the CLI (command-line/terminal).
This video shows how to do this procedure.
It the above is not the case, could you please send us screenshots of what you're trying to do, it will be really helpful to help you to fix this issue.
Create a new file in CSS(type),
then link that file using the <link> tag in your HTML page using the address of the newly created .css file.
I have made my project with bootstrap, html and css. But the Github pages are only showing the readme file and sending me the error mail. Please help me, this project is important for me
First of all, index.html is missing from your repository.
If you have used only Bootstrap, CSS, and HTML, you probably don't even need npm. You can just upload your files (including those folders for images and CSS) and then go to your Repository Settings and in Github Pages, set the source. If you have an index.html, then <username>.github.io/repo-name will render it automatically after a successful build.
You might find this repository which was made using HTML, CSS, Bootstrap (and Javascript) helpful to refer to.
PS: Don't push node_modules on GitHub. You should ideally add that folder to .gitignore. These modules can be installed by the user who clones your repo using npm commands.
this is probably a really stupid question, but it'd be awesome if you could help me.
Here's the problem: I've added a package to my project. It contains some css files which I want to use in my HTML files and so on. I've added it by using yarn add <package>. The files are located inside /node_modules/semantic-ui-css/semantic.min.css.
Do I have to reference complete node_module path to load the css file inside my HTML file? That just doesn't sound right. Before I used a package manager I just downloaded a few css files, placed them into /vendor/css/ and used them.
Or is it normal these days to use <link rel="stylesheet" type="text/css" href="node_modules/semantic-ui-css/semantic.min.css">?
Target folders can be defined with
yarn install --modules-folder vendor/ semantic-ui-css
giving you a results of
href="vendor/semantic-ui-css/semantic.min.css"
Each package will always be wrapped in its own folder.
After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
I'm currently learning to use yootheme's uikit. I'm currently running it off of Apache 2.4.16 on my Mac, but the index.html page won't bring up the main uikit.css (or any css) buried two or more folder levels deep (as all the css files within uikit's directory are).
Here is my folder structure:
MainSiteFolder
index.html
uikit/
css/
uikit.css
fonts/
js/
And here is the line I included in the head of index.html (copied and pasted):
<link rel="stylesheet" href="uikit/css/uikit.css" />
If I pull out that css file and put it in any other folder I create (or the root directory), I can change the reference to "otherFolder/uikit.css" and it works perfectly... but I'd like to be able to keep things organized within multiple folders until I nail down which of the many uikit css files I plan to use.
Is there something I've missed that removes my ability to load css files that are more than one folder lever deep? Or do I need to just put everything into one css folder, despite the loss of convenience organization would bring?
EDIT: Must have been something strange with my browser (or Apache?) not realizing there were files in the folder. I don't know the reason, but removing the entire folder, and recreating it inside the directory, then uploading the files individually got it working. Though it still baffles me why it didn't work in the first place. Some sort of missing reference or something perhaps.
Use:
../
To go to a higher directory, like:
href="../uikit/css/uikit.css"
To go 'up' one level of directories. ../../ goes up 2 levels, and so on ...
Alternatively , start at the root directory, in Windows it is C: not sure what it would be on your system, but something followed by a :