[BAH-4150] Replace Compass with Grunt-SASS for SASS Compilation #1027
Conversation
… SCSS files with improved media query formatting and new utility mixins
|
|
| @@ -13,6 +13,7 @@ module.exports = function (grunt) { | |||
| nodeModules: 'node_modules' | |||
| }; | |||
|
|
|||
|
|
|||
There was a problem hiding this comment.
@ayazurrehman It seems there is an ESLint error in your Gruntfile.js at line 15 due to multiple consecutive blank lines, which violates the no-multiple-empty-lines rule. This rule enforces that there should not be more than one blank line in the code for better readability and consistency.
To fix this error, you can remove the extra blank line(s) present after line 15.
I also noticed that this might have been added intentionally. Could you explain the reasoning behind this decision? If the blank lines serve a specific purpose, let us know so we can determine the best approach to resolve this issue without affecting the code's intent.
There was a problem hiding this comment.
@ayazurrehman During the validation of this PR, we observed the following warning appearing multiple times when running the yarn ci command on the new changes:
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
This warning indicates that the @import rules used in your Sass files are outdated and will no longer be supported in future versions of Dart Sass. It is recommended to replace these @import rules with the newer @use or @forward rules, as they offer better modularity and clearer dependency management.
Could you look into these warnings and update the relevant Sass files accordingly? Addressing this will ensure a more seamless and future-proof build process. Let us know if you need any guidance or assistance in resolving this.
There was a problem hiding this comment.
I encountered an issue while testing the new dist built from the changes in this PR. Specifically, when trying to access the Clinical and Appointments modules, the screen displays as a blank white page with no content rendered.
Although there is a deprecation warning related to the usage of @import in Sass (Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.), I am not certain if this is the root cause of the issue.
Below are my system specifications for reference:
❯ nvm -v
0.39.7
❯ npm -v
10.2.4
❯ sw_vers
ProductName: macOS
ProductVersion: 15.2
BuildVersion: 24C101
MacBook Pro (16-inch, 2021) Apple M1 Pro
Could you investigate this issue and identify the potential cause? Let us know if any additional details are needed to troubleshoot this further. Thank you!
| @@ -97,7 +97,8 @@ | |||
| "karma-ng-html2js-preprocessor": "^1.0.0", | |||
| "matchdep": "^2.0.0", | |||
| "react": "16.14.0", | |||
| "react-dom": "16.14.0" | |||
| "react-dom": "16.14.0", | |||
There was a problem hiding this comment.
With Compass now replaced by Grunt-Sass, could you please update the README with the relevant steps to build the UI? The issues I encountered during testing might have resulted from a missing step or a mistake during the build process.
Providing updated and accurate build instructions will help streamline the review process and ensure a more efficient validation of the changes. Kindly address this at the earliest. Thank you!
Compass is currently used for SASS/SCSS compilation in the project. However, it relies on Ruby, which introduces unnecessary dependencies and complicates the development setup. To modernize the project and streamline the build process, I propose replacing Compass with Grunt-SASS, a Node.js-based solution.
Grunt-SASS is faster, eliminates the need for Ruby, and integrates seamlessly with the existing Node.js environment. It also simplifies onboarding for developers by requiring fewer global dependencies.
https://bahmni.atlassian.net/browse/BAH-4150