Migrate LESS styles to SCSS

[adibmbrk]

Summary

This PR migrates the LESS styles to SCSS. I have conducted manual testing and I have verified that it's working as expected.
Below is a video of the testing I conducted with the changes I have made.

Screen.Recording.2025-01-26.at.14.37.42.mov

Details of Changes

How styles were identified for migration: I searched for .less files Using a search tool such as VS Code's global search, I traced references to these files in Vue components. And then migrated the styles to work with scss rather than using less.

This PR I believe is partial and wouldn't result in closing the issue below as LESS needs to be removed from the build tooling as well.

References

Closes #4827

[adibmbrk]

@MisRob @akolson @nucleogenesis I have updated the PR description, I only migrated the .less files to scss , there is still less being used within the style block of vue components. Should i send follow up PR's to remove them as well. And after that as a next step I would have to remove less from the build tooling right?

• studio/contentcuration/contentcuration/frontend/shared/views/Alert.vue

  Line 89 in a9dd35e

  <style lang="less" scoped>

[MisRob]

Thanks for info @adibmbrk.

Yes, I think it'd be great to have all this work split to more pull requests.

[nucleogenesis]

The changes here LGTM - thank you @adibmbrk - echoing @MisRob I appreciate doing this in small chunks!

[akolson]

Hi @adibmbrk! Great work with this pr. We however seem to be having some build failures--something about the ::v-deep not being recognized. Could you please check this out?

[adibmbrk]

Hey @nucleogenesis @akolson, with commit d2574e0 I have removed the usage of ::v-deep as it is not required in this context. Since the component does not use scoped styles, ::v-deep has no effect and is unnecessary.

[akolson]

Hi @adibmbrk! Is this pr ready for review?

[adibmbrk]

Hi @adibmbrk! Is this pr ready for review?

Nope, will let you know when it's done

[adibmbrk]

This PR is ready for review @akolson

[akolson]

$svg-width: calc(100% * 9 / 16 / $svg-scale);

[akolson]

Hi @adibmbrk Great work on the migration. I have left a few comments. Please let us know if you have any questions. Also, it might be worth streamlining how v-deep is used ie. ::v-deep(.some-class) vs ::v-deep .some-class. I think it would makes sense to continue use the syntax used previous with the /deep/ ie /deep/ .some-class; I think I saw one or two occurrences of ::v-deep(.some-class) that we'll need to change to ::v-deep .some-class

[adibmbrk]

Hey @akolson, I have fixed the suggestions from the code review, let me know if there are any more suggestions or changes.

[akolson]

Migration looks correct to me. Thanks @adibmbrk.

@rtibbles any additional thoughts before we merge?

[rtibbles]

I think the only thing missing is removing the less configuration from the webpack config - just needs deletion of these four lines: https://github.com/learningequality/studio/blob/unstable/webpack.config.js#L104-L107

[akolson]

@adibmbrk, The final piece and we should be good to merge.

I think the only thing missing is removing the less configuration from the webpack config - just needs deletion of these four lines: https://github.com/learningequality/studio/blob/unstable/webpack.config.js#L104-L107

[adibmbrk]

Made the final change @akolson, Let's get this merged! 🚀

[akolson]

Approved!

[MisRob]

Thank you @adibmbrk for this update and @akolson for such a careful review. Lots of good work.