Unable to get sass file to override existing stylesheet

HTML-CSS
1

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:

employee
employee1885×280 31.1 KB

_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.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.