I am in serious need of your you.
My application is working on an old environment, then I moved the same source code to a new environment. It seems (guessing) to me that the stylesheet and images couldn't be loaded on the new environment even though the source code is the same.
Any suggestion and help are highly appreciated.
Some notes,
i. the old working environment is NodeJs 6.11, Angular2 and
Angular-cli 1.0.0
ii. the new not-working environment is NodeJs 8.4, Angular4 and
Angular-cli 1.4.3
iii. I put the bootstrap on local
"app/css/bootstrap/dist/css/bootstrap.min.css"
Expected first page with style and logo. This is still working on the old env:
I got the plain mark-up below on the new environment. All the styles and images are gone. The firefox console on the right hand side showed that those are not loaded. Will it related to the new version of Webpack?
My code - app.component.html
My new not-working package.json
My index.html
Please kindly help. I am a beginner on HTML and AngularJS.
Please kindly let me know if I need to provide more information or I need to upgrade some modules.
Best regards,
Autorun
Move your css styles, images and javascript files inside the assets folder in the latest version of angular-cli.
use your images like below from assets folder :
<img alt="image" class="img-circle" src="assets/iamges/logo.png">
And add your stylesheet and javascript file inside the .angular-cli.json
"styles": [
<!-- "assets/css/style.css" from assets folder -->
<!-- "../node_modules/bootstrap/dist/css/bootstrap.css" from node modules -->
"styles.css"
],
"scripts": [
<!-- "../node_modules/jquery/dist/jquery.js" from node modules js files -->,
<!-- "../src/assets/js/javascript.js" from inside assets files-->
],
After changes restart your porject.
This is to continue on Chandru's answer. It works. Please see the screenshot of my change. Since I can't post screenshot in comment, I hope it is ok to post here.
Related
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 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.
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
I am trying to get bootstrap to work with eclipse Dynamic Web Project (Helios). However when I run (Tomcat v7) on the server I get regular html. I think there must be an error with the link. I downloaded bootstrap and imported the file system in WebContent, there is a bootstrap folder (with css, img, js) inside WebContent.
I have tried:
"href="boostrap/css/bootstrap.css". "href="WebContent/boostrap/css/bootstrap.css". "href="css/bootstrap.css". "href=bootstrap.css".
I also copied the bootstrap folder outside of WebContent and tried all of the above. What's wrong?
The code I used is exactly (copied and pasted) the source from http://getbootstrap.com/examples/starter-template/#
with the href modified. I did not put it here because I'm getting weird formatting from StackOverflow.
Could it be that you spelled boostrap instead of bootstrap when using "href...?
I am getting the same problem. When I am using eclipse server to run webpage(using bootstrap) then it doesn't work.
But if i go to the webroot or webcontent folder and open the webpage then bootstrap works fine.
I hope you have downloaded jquery.min.js.