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.
Related
I want to implement bootstrap-icons in an angular project but it is not working. I ran the following command,
npm i bootstrap-icons
But I am unable to add icons in the web page with icon fonts.
For now, I have added the bootstrap icon CDN in index.html file and it is working.
I want to know if we need to add the path for bootstrap icon file anywhere in the angular.jason file or it should work after the install command.
Your answers are appreciated!!!
Thank you.
First, run npm i bootstrap-icons --save
then in the angular.json file
Add the path to the "Styles" key value like this,
"styles": ["node_modules/bootstrap-icons/font/bootstrap-icons.css",]
Installing a package to your project via npm just downloads the package files to node_modules. You would have to configure your project to import the necessary files in order to utilise the package.
In this case, since it is a icons library, you probably have a stylesheet which you already pointed out works via CDN inclusion in the html file.
In angular, try importing the bootstrap-icons.css file into your styles.css file. You would need to check where the bootstrap-icons folder is in node_modules and find the css file within the folder structure.
From my local install, I identify the location to be: node_modules/bootstrap-icons/font/bootstrap-icons.css
In your styles.css file, add the import statement:
#import '~bootstrap-icons/font/bootstrap-icons.css';
This should get your icons working. If not, ensure the bootstrap-icons.css file path is correct and accessible.
Attaching a working example (hosted on stackblitz):
https://stackblitz.com/edit/angular-bootstrap-icons?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html
I too was facing the issue. After importing the icon CSS file at style.css it is working perfectly
First install bootstrap icons with npm:
npm i bootstrap-icons --save
Then go to your angular.json file and add this to your styles:
"styles": [
"src/styles.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
],
Now you can use whatever icon you want.
ex.:
<i class="bi bi-bootstrap-fill"></i>
If you don't want to use npm to use bootstrap icons, you might look at: https://icons.getbootstrap.com/#install
Hello hope you are well!
I am working on project when Frontend is in HTML, CSS, SASS, JavaScript, for backend I am using PHP Laravel framework.
My goal is to compile file sass into file CSS, for this reason I have followed their steps:
1.In folder resources, I created folder sass, into it, I created file app.sass
2. In folder public, I created folder CSS and into it, I created file app.css
In file webpack.mix.js I have written a method like below:
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss","public/css"
);
when first rules is for source "resources/sass/app.scss" and second rule is destination "public/css".
After that In file index.html I written this rule by document:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
when I run : npm run dev/ npm run watch
sass compile into css as you can see, but in browser doesn't seen any style second images is the case in the web: I want to display styles on the web after compile it does any idea or maybe exist any another rules that I don't know yet?
Thanks.
enter image description here
enter image description here
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.
I'm attempting to import an atomic CSS framework - http://buildwithbeard.com/ - into a Codepen Project. I'm able to successfully get most of the functionality through simply linking it in my HTML like so:
<link rel="stylesheet" href="https://unpkg.com/beardcss/dist/beard.css">
However, in order to add new helpers (specifically, color helpers!), I need to import it into a .sass file as explained on this page.
But, because it's telling me to install it via NPM, I can't figure out a way to get the proper files into the proper place into my CodePen project.
(Here's a link to my CodePen Project.)
This guide on how to fake node modules in CodePen assumes a .js file - I can't figure out which files I need in which folder in order to successfully use BeardCSS in this CodePen Project.
How can I import and use BeardCSS in my CodePen Project?
I'm taking a course on CSS3 and HTML5, and I ran into some trouble: my CSS folder isn't located in the correct spot... or something. I have no clue what's going on, but after a few hours of messing around, I went into the inspect element tool, and noticed some files aren't loading, so that's why my CSS isn't working! I attached an image, can you tell me what it means?
Also, where should my CSS file be? I'm using bootstrap and sublime text.
Thanks in advance.
Well, nvm on that image. It says I need 10 credits...
It says in inspect element:
Failed to load resource: net :: ERR_FILE_NOT_FOUND
CSS files can be called from a path relative to the document calling them. For instance, given you have a folder directory that looks like this:
/(your root directory)
-css
-bootstrap
app.css
-img
-js
index.html
-pages
pageone.html
...your css link in your index should look like this:
<link rel="stylesheet" href="css/bootstrap/app.css" />
whereas the link for pageone.html would look like this:
<link rel="stylesheet" href="../css/bootstrap/app.css" />
the ../ tells the server to look in a directory directly above the calling file for the path described in the link
With Bootstrap, are you using straight CSS, LESS, or SCSS? If you're using a pre-compiler, check your pre-compiler's settings file to ensure your compiled css files end up in the proper directory.
In sublime text for getting directory path please install a package called Auto File Name if you have a package control already installed in your sublime if not, the google package control and install in your sublime editor , auto file name lets you go well in your directory path and call your files.
I have encountered the same problem before. the external stylesheets is not recongnized !!
Failed to load resource: net::ERR_FILE_NOT_FOUND
If your HTML is in the root and your CSS folder is also in the root then your links are incorrect. You shouldn't have a slash / in front of the file name.
try:
<link rel="stylesheet" href="css/style.css" type="text/css">
see this