Changes made to the main.css file were erased when running gulp install within the JHipser project

Just diving into the world of jhipster. I recently included a new css property in the main.css file and referenced it in the home.html. However, after executing the gulp install command, that modification vanished from the main.css. Is there a way to retain that modification even after running the command?

Answer №1

When utilizing the SASS feature in JHipster, it is recommended to implement all CSS or SCSS modifications within the main.scss file.

As part of the compilation process, gulp (for AngularJS) or webpack (for Angular) will transform the main.scss file into main.css, overwriting the contents of that particular file. This is also why main.css is added to the .gitignore list.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

Using protractor's onPrepare feature to set up for various test suites

In my conf.js file, I have an onPrepare function where I handle logging into the application. This function is executed every time I run one or more test suites, allowing me to log in before running any tests. The problem arises when I do not want to logi ...

AngularJS Directives Directory: A hub for all things related to

Can you recommend any websites or resources where I can find angularjs directives that have been created by the community? Just to clarify, I'm not looking for the ones that come built-in with angularjs. ...

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

Storing and accessing a rootScope parameter and its value in Angular JS cache

Is there a way to cache this basic object ($rootScope.config.app_genres) that I set via $http for a specific amount of time? $http.get($rootScope.config.app_ws+'get/genres',{},{cache:true}).success(function(response) { $rootScope.config.app ...

Using jQuery to create sliding animations with left and right transitions

I recently learned about the slideUp and slideDown functions in jQuery. Are there any similar functions or methods for sliding elements to the left or right? ...

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

What is the best way to combine a hyperlink with a string in an Angular form?

Currently I am in the process of learning angular and experimenting with creating a list of websites that can be clicked on, similar to what you would find in a bookmark app. This is based on a todo example. https://github.com/LightYear9/ToDoList In orde ...

Repurposing components like custom text inputs, spans, and more in ASP.NET MVC using Razor

Our team is currently working on a website project where we keep re-using components repeatedly. One particular instance involves a span that functions as a warning light. It's accompanied by some C# code with properties for color and text, Javascript ...

How to get the most out of the $scope variable?

Is it possible to assign a regular JavaScript variable the current value of an Angular $scope variable without having their values binded together? //$scope.var1 is set to a specific value, for example, 5 var v2 = $scope.var1; //$scope.var1 is then update ...

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

Angular memory leakage is a common issue that can arise

Having trouble with memory leaks in Angular 1.2.6 when switching views? You're not alone. Even after thorough research on how to fix memory leaks in Angular, the problem persists. It seems like the DOM is not being released when views are switched. ...

What is the correct timing for implementing a JavaScript delay to activate CSS styling?

Let's say I have some CSS like #joe { transition: opacity 500ms; opacity: 0; } Next, I include JavaScript that triggers the addition of a div and then animates the opacity to = 1 when you click the page. document.body.onclick = function () { var j ...

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

Guide on transmitting the chosen country name from a dropdown menu to Spring MVC using AngularJS

My goal is to send both the selected country name and country code (coming from the URL in JSON format) to a Spring controller using a post URL. However, I'm encountering an issue where only the country code is being sent through the URL to the Spring ...

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

The comparison between Bootstrap 4 collapsible and expanded menus

Forgive me if this question has already been asked (I'm still new to all of this and learning, finding the answer in search is challenging). I'm attempting to create a collapsible navbar that, when expanded, displays items separated by a "|" sym ...

Trouble with displaying label in PDF post HTML conversion using iText html2pdf

Software Versions: html2pdf v2.0.1 iText 7.1.1 The HTML label that spans the width of the page is as follows: <label class="test">Patient</label> CSS Styling: .test { display: block; font-weight: bold; color: #009fd1; font ...

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

Setting up automatic CSS linting in a Vue.js project for seamless correction

Is there a way to enforce linting on the <style> segment within a .vue file while coding? I have set up eslint (with airbnb ruleset)+prettier for the <template> and <script> sections, which includes some auto-correction upon saving, but I ...