I installed this generator through Yeoman, and as far as I know everything has been installed successfully. When I run gulp serve, the default webpage seems to load without style as pictured below. The SASS seems to be compiling into CSS correctly, and both my CSS and HTML have been validated.
Any suggestions? Thanks :)
Related
I'm trying to auto-refresh my page when I make changes with broswer-sync and gulp.
So far I have it working with my html but I can't seem to figure it out with my css code too.
I have this line of code in my gulpfile.js that works quite well with ONLY html.
gulp.watch("*.html").on("change", reload);
Any help? Thanks! I've also tried putting *.css into the .watch() function and had no luck. I also have a folder with my css in it named "css".
Found the solution!
You cannot see changes with javascript nor CSS. If you want that you'll need to do a live server following https://www.npmjs.com/package/gulp-live-server
EDIT
Go download live server in VSCode, you're welcome...
I am new to SCSS. I am working on a python web application. I have an issue that the changes in SCSS are not reflected. Only the changes in CSS file are reflected.
I checked online and created a mapping file:
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACE;EACE","file":"index.css"}
I still very confused. Do I need to run some command to map the SCSS to css whenever I change the scss file? If yes, what command should I run?
Thanks!
You need to make sure your workflow compiles the scss files to css everytime you start your application.
I'm building a React/Laravel app. However, when I tried to style the layout, I found that I cannot edit in public/css/app.css since every time I run the npm run dev command, the changes I've made disappear from the app.css.
Therefore, I created a style.css but I was confused about whether I should put the style.css into the public folder or resources folder. Moreover, after looking at Laravel docs, this link said that I should add a code to webpack.mix.js. So here's what I wrote
.styles('public/css/style.css', 'public/css/all.css');
adding this to the last part of the whole code:
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('public/css/style.css', 'public/css/all.css');
After running npm run dev, I refreshed the page and the page is still not showing the changes from style.css.
Here is my repo: https://github.com/kikidesignnet/hotelreviews and my website which I'm editing: http://immense-beach-76879.herokuapp.com/
What am I missing?
Add the all.css file to your main layout.
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.