Unable to get sass file to override existing stylesheet

151
February 17, 2022, at 9:30 PM

I have a sass file that I want to override the existing stylesheet but I'm unable to see the sass override when I inspect in the browser. I included a screen shot that doesn't show the design system and override:

_titlebar.scss - variable used from design system.

.ui-dialog.active-dialog:not(.ui-dialog-minimized) .ui-dialog-titlebar {
background-color: var(--linq-color-primary-500);
}

_index.css

@import './_status.scss';
@import './_titlebar.scss';

I use a design system in the application that include the core file, a theme file and the material design theme. I removed part of the https for the design system for security reasons below

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Alio</title>
<link href="app/alio/img/LINQ-logo.svg" rel="shortcut icon" />
<script src="runtime/js/bootstrap.js"></script>
<link href="runtime/css/frames-loader.css" rel="stylesheet" />
**<link href="https://.../theme/blueberry-muffin.css"
      rel="stylesheet" media="all" />
<link href="..../snackpaq-core.css"
      rel="stylesheet" media="all" />
<link href="https://.../material-theme.css"
      rel="stylesheet" media="all" />**
<title></title>
</head>
<body>
<script type="text/javascript">
    bs_init();
</script>

gruntfile.js

module.exports = function (grunt) {
var env = grunt.option('env'); // i.e.: --env develop
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*\n' +
            ' * <%= pkg.name %>\n' +
            ' * \n' +
            ' * Version: <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n' +
            ' * Copyright <%= grunt.template.today("yyyy") %> MORPHIS - http://www.morphis-tech.com/\n' +
            ' */\n',
    sass: {
        css: {
            options: {
                sourcemap: env == 'develop' ? 'auto' : 'none'
            },
            files: {
                'css/expanded-default.css': 'scss/expanded-default.scss',
                'css/expanded-light.css': 'scss/expanded-light.scss',
                'css/expanded-light-rtl.css': 'scss/expanded-light-rtl.scss',
                'css/expanded-dark.css': 'scss/expanded-dark.scss',
                'css/expanded-dark-rtl.css': 'scss/expanded-dark-rtl.scss',
                'css/expanded-purplelight.css': 'scss/expanded-purplelight.scss'
               ..... 
            }
        }
    },
    cssmin: {
        options: {
            banner: '<%= banner %>',
        },
        css: {
            files: {
                'css/light.min.css': ['css/light-rtl.css'],
                'css/light-rtl.min.css': ['css/light-rtl.css'],
                'css/dark.min.css': ['css/dark-rtl.css'],
                'css/dark-rtl.min.css': ['css/dark-rtl.css']
            }
        }
    },
    watch: {
        sass: {
            files: [
                'scss/**/*.{scss,sass}',
                'widgets/**/*{scss,sass}',
                '../base/scss/**/*{scss,sass}',
                '../base/widgets/**/*{scss,sass}'
            ],
            tasks: ['sass:css']
        },
    }
});
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.registerTask('default', ['sass', 'cssmin']);
};

Can someone please provide a reason why and a solution to what I need to do to get the the sass override to work properly.

Rent Charter Buses Company
READ ALSO
How to change start point of animation in CSS?

How to change start point of animation in CSS?

I want to change the start point of the SVG path animationI am a beginner in SVG paths, so might be a dumb question

140
Making an image stay at the bottom of the page but not go over content

Making an image stay at the bottom of the page but not go over content

I have an a logo image that is supposed to remain at the bottom of a nav drawerThe only way I know to have it be at the bottom is with the absolute and bottom properties, but that's causing it to overlap the list items on a short device (shrink the height...

122
How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

I've seen multiple ways involving JS/Jquery that allow enabling a second select element (from a disabled state) once the first select element option has been chosen, but I am wondering if anyone can share how to accomplish this with CSS

145
Overlaying an image while scrolling

Overlaying an image while scrolling

If you look at the picture attached you can see a picture of a person then a white space with a border radiusI wanted to know if there is a way while scrolling down for the white space the overflow the image, and while scrolling up to show the image again

96