HTML & CSS Unable to get sass file to override existing stylesheet

[bootsy]

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']);
};

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.

 

[OldMan]

My question is: Are the sass generated CSS files named differently from the ones you wish to replace and why don't you just delete the link to the old files and make a link to the new files?