My Gulp and Browsersync setup is causing the CSS in the Style.css file to reset every time I run npm start. While the changes to index.html persist and I can successfully push the initial CSS changes to Github, I am puzzled why the CSS additions keep resetting. Any suggestions on how to prevent this from happening would be greatly appreciated!
Your project is configured to utilize scss, which will be translated into standard css.
If you input your code directly into the css file, the gulp task will recompile the scss and overwrite your modifications.
To prevent this from occurring, it is recommended not to have the gulp output directory write to the same folder used for development (src).
gulp.task('sass', function(){
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css")) <-- place this elsewhere
.pipe(browserSync.stream());
});
To resolve this issue, simply write your styles in the scss file.
I am trying to create a togglebutton for a website with Microsoft Visual Studio and am not sure if this would be the correct code to apply. I am working in C#, so the button is going to be generated in C# (and a bit of jquery) code and eventually styled in ...
I am currently working on styling a React app with MUI and I need help figuring out how to make a div's height adjust to its content. Specifically, I have a Card component that contains a Button. Upon clicking the Button, the content below the Card ge ...
I am facing an issue with my code .name-bar, .email-bar { border-color: gray; border-style: solid; display: inline-block; } .email-bar { margin-top: 5px; } .div-one, .div-two { border-color: gray; border-style: solid; width: 200px; h ...
I need some help with my code. Can you please take a look and let me know why the hover effect is not working? Thank you! <style> #moreDiscussHome:hover{ background-color: #ffffff; } </style> <a id="moreDiscussHome" style="co ...
I am currently developing an app using angularjs and typescript, but I've encountered a persistent error that has me stumped. Below is the snippet of my code: export var NgApp = new application.Startup(); ///<reference path="../../../../../typin ...
I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...
I'm facing a challenge using Flexbox to achieve the desired result shown below https://i.sstatic.net/8vJGQ.png When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this l ...
Utilizing bootstrap to showcase canvas thumbnails within a div for lighter client-side creation. While not the perfect design, it's functional. An issue arises when viewing the app on a mobile device in portrait mode - the col-xs-6 class remains fixe ...
Is there a way to align the content of a box to the left when the box doesn't overflow? I have a scroll indicator created with CSS only, which works well but has this alignment issue. Any suggestions or improvements on the code are welcome :) html ...
I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...
Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...
Hey there, I've encountered a strange issue with the datepicker on this website. It works perfectly fine on IE8+, Firefox 14, Chrome 20, and Opera 12. However, as soon as Chrome updated to version 21, things went haywire! I'm baffled and can&apos ...
Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...
Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...
Selenium Web Driver- I'm having trouble locating an element using Xpath. Any suggestions on a better way to locate the element below? <div class="gwt-Label">Declined</div> I attempted to retrieve the text in the element using the followi ...
I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...
There is a parent div with a child div inside it. I want the border color and text of the child div to turn white when a user hovers over the parent div. For instance, in the example provided, the text inside the box that says No score, yet click and subm ...
[Beginner in Web Design] I am currently experimenting with creating a layout similar to the one shown here: https://i.sstatic.net/j70FD.png Here is what I have attempted so far: .inner, .outer { position: relative; } .dash { border: 0; borde ...
Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...
While browsing with your browser, you have the ability to adjust the font size by using CTRL + + or CTRL + -. Is there a way to replicate this functionality through code, such as with JavaScript? I am looking to add buttons on my website that allow users ...