Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file.


        <!--MATERILIZE CORE CSS-->
        <link href="../../common/vendors/Materialize/dist/css/materialize.css" rel="stylesheet"/>
        <!--MAIN STYLE-->
        <link href="views/modules/main/min/custom-min.css" rel="stylesheet"/>
        <!--END MAIN STYLE-->

UPDATE 1: This is a snippet of my gulpfile:


        (function () {

            'use strict';

            // Your gulp tasks and functions go here...

        })();
htmlcssangularjsgulpmaterialize

Answer №1

Would you be able to provide your gulp code? It's possible that there may be a gulp task you created that dynamically generates the index.html file. Double check that the paths for adding CSS files are correct wherever you have written tasks for it. If certain CSS files appear to be missing, it could be due to them not being in the specified path.

gulp.task('inject:css', () => {
return gulp.src(paths.client.mainView)
    .pipe(plugins.inject(
        gulp.src(`${clientPath}/{app,components}/**/*.css`, {read: true})
            .pipe(plugins.sort()),
        {
            starttag: '<!-- injector:css -->',
            endtag: '<!-- endinjector -->',
            transform: (filepath) => '<link rel="stylesheet" href="' + filepath.replace(`/${clientPath}/`, '').replace('/.tmp/', '') + '">'
        }))
    .pipe(gulp.dest(clientPath));
 });

The above task will incorporate all CSS files from the app and components.

gulp.src(`${clientPath}/{app,components}/**/*.css`, {read: true})

If I manually add some CSS files outside of those two folders and then run gulp, they will be removed. Make sure to address this issue by following the provided instructions.

I believe this solution should help resolve the problem you are encountering.

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

Switching the typeface within the content data

Recently, I incorporated this code: <div data-content="Reach" class="main-image"> along with the following CSS styling: .main-image:before { content: attr(data-content); I am now wondering if there is a method to adjust the font size and ...

css

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

cssangularprintingmaterial-designangular-material

How can XPATH be written for an HTML tag that contains spaces before and after the text, such as <button>spaces text spaces</button>?

When developing a selenium-java script, I encountered an issue while trying to assert the text "Export All". The spaces between the HTML tags are causing difficulties in asserting it. I am seeking assistance in writing the xpath for this scenario. Can any ...

javahtmlxpathselenium-webdriver

AngularJS: incorporating modules across distinct controllers

Imagine we have two distinct AngularJS controllers housed in separate files that are both referenced in an HTML document. Here's how it looks: //controller1.js "use strict"; var someApp = angular.module('MYAPP'); //var someApp = angular.mod ...

javascriptangularjs

What could be the reason for the error this code is generating in the HTML validator?

As I work on creating a website that must meet W3C compliance standards, I have encountered an issue with PHP tags. The validation process runs smoothly until I insert this code snippet: <?php include 'menu.html'; ?>. An error message is ge ...

phphtml

How can you override the selected classes for menu items in Material-UI using React.js?

Hey there! I'm facing an issue where I can't override the class that displays the correct styling when a menuItem is selected. Below is my code: <MenuItem component={Link} to="/Acceuil" className={{root:classes.menuItem ,selected:cla ...

cssreactjsmaterial-uimenuitemstyling

Cannot retrace steps in file tree using ../

My website has a file structure set up like this: css style.css other files... templates index.html other files... I am attempting to reference the style.css file from my index.html document. My initial attempt was to navigate back a directory u ...

pythonhtmlcsspostgresqlflask

A date picker pops up when the user clicks on an Angular input field of type text

I am looking to edit a dateTime value using Angular/Ionic, but unfortunately there is no dateTime picker available. To work around this issue, I have split the field into separate date and time fields. In order to incorporate placeholder text and format th ...

htmlangularjscordovaionic-framework

How to Implement Loading Image with CSS

I have customized the CSS code below to style a div element that showcases a responsive image. .my-img-container { position: relative; &:before { display: block; content: " "; background: url("https://lorempixel.com/300/160/") ...

htmlcsspseudo-classresponsive-images

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...

javascripthtmlvue.jscanvas

Retrieving HTML content using CURL

Could really use some help with my curl issue: I'm using CURL to connect to a page, then redirecting myself to another page that's only accessible when logged in. How can I retrieve the HTML code from this page? I can see the page displayed, but ...

phphtmlcurlscreen-scraping

Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working. .description { display: block; opacity: 0; text-align: left; height: 130px; padding- ...

htmlcss

Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very l ...

javascripthtmlcssgoogle-chrome

Leveraging ng-change in AngularJS when utilizing the "Controller As" syntax

Attempting to steer clear of using $scope within my controller function, I have instead chosen to use var viewModel = this; employing the "controller as" viewModel syntax. The issue at hand is that while I can access data from a service, invoking functio ...

javascriptangularjsangularjs-scope

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...

htmlcssgoogle-chromefirefox

What is the best way to move to a new line without creating a space between the current line and the new line?

I am trying to achieve the desired output: $text = Hello, this is example text. rather than: $text = Hello, this is example text. When I use \n, it starts a new line. How can I make it stay on the same line below with the same startin ...

phphtml

The primary tab's background color in a Shiny app

I had this question deleted previously while I was in the process of refining it. Is there a way to customize the background color of the active tab in a Shiny app? library(shiny) ui <- fluidPage( tags$head( tags$style(HTML(css)) ), tabsetP ...

htmlcssrshiny

Firefox does not display the line headings on the sides

Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...

css

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

htmlcsscss-selectorshtml-table

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss