diff --git a/contribs/gmf/examples/backgroundlayerselector.js b/contribs/gmf/examples/backgroundlayerselector.js
index 120f6eab0be1..235b8bc2137a 100644
--- a/contribs/gmf/examples/backgroundlayerselector.js
+++ b/contribs/gmf/examples/backgroundlayerselector.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfThemes'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['gmfThemes'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './backgroundlayerselector.css';
+import './backgroundlayerselector.scss';
 
 import angular from 'angular';
 import gmfBackgroundlayerselectorModule from 'gmf/backgroundlayerselector/module';
@@ -45,6 +43,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name,
 ]);
 
+MainController.$inject = ['gmfThemes'];
+
 /**
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes Themes service.
  * @class
diff --git a/contribs/gmf/examples/backgroundlayerselector.css b/contribs/gmf/examples/backgroundlayerselector.scss
similarity index 94%
rename from contribs/gmf/examples/backgroundlayerselector.css
rename to contribs/gmf/examples/backgroundlayerselector.scss
index 8b3f35869a6b..f4ad03287662 100644
--- a/contribs/gmf/examples/backgroundlayerselector.css
+++ b/contribs/gmf/examples/backgroundlayerselector.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 50rem;
   height: 30rem;
diff --git a/contribs/gmf/examples/contextualdata.js b/contribs/gmf/examples/contextualdata.js
index 746fbd49f457..af1532bbee45 100644
--- a/contribs/gmf/examples/contextualdata.js
+++ b/contribs/gmf/examples/contextualdata.js
@@ -19,9 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import 'ngeo/contextualdata/contextualdata.scss';
-import './contextualdata.css';
+import './contextualdata.scss';
 
 import angular from 'angular';
 import gmfContextualdataModule from 'gmf/contextualdata/module';
diff --git a/contribs/gmf/examples/contextualdata.css b/contribs/gmf/examples/contextualdata.scss
similarity index 66%
rename from contribs/gmf/examples/contextualdata.css
rename to contribs/gmf/examples/contextualdata.scss
index c7b21450a94d..ead3a5e2baba 100644
--- a/contribs/gmf/examples/contextualdata.css
+++ b/contribs/gmf/examples/contextualdata.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/contextualdata/contextualdata.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/datepicker-ref.png b/contribs/gmf/examples/datepicker-ref.png
index 0293f6239261..481fa07af28b 100644
Binary files a/contribs/gmf/examples/datepicker-ref.png and b/contribs/gmf/examples/datepicker-ref.png differ
diff --git a/contribs/gmf/examples/datepicker.js b/contribs/gmf/examples/datepicker.js
index 4ebd79c23ff8..6db000c0e5d7 100644
--- a/contribs/gmf/examples/datepicker.js
+++ b/contribs/gmf/examples/datepicker.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoWMSTime'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['ngeoWMSTime'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './datepicker.css';
-import './common_styles.scss';
+import './datepicker.scss';
 
 import angular from 'angular';
 import ngeoMiscDatepickerComponent from 'ngeo/misc/datepickerComponent';
@@ -39,6 +37,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMiscWMSTime.name,
 ]);
 
+MainController.$inject = ['ngeoWMSTime'];
+
 /**
  * @class
  * @param {import('ngeo/misc/WMSTime').WMSTime} ngeoWMSTime wmstime service.
diff --git a/examples/datepicker.css b/contribs/gmf/examples/datepicker.scss
similarity index 92%
rename from examples/datepicker.css
rename to contribs/gmf/examples/datepicker.scss
index 5b3bfe8adfcd..800f88ef0584 100644
--- a/examples/datepicker.css
+++ b/contribs/gmf/examples/datepicker.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 li {
   margin: 20px;
   list-style: none;
diff --git a/contribs/gmf/examples/displayquerygrid.js b/contribs/gmf/examples/displayquerygrid.js
index 70b08ea63150..8aa377c4c4f5 100644
--- a/contribs/gmf/examples/displayquerygrid.js
+++ b/contribs/gmf/examples/displayquerygrid.js
@@ -1,5 +1,3 @@
-MainController.$inject = ['gmfThemes', 'gmfDataSourcesManager', 'gmfThemeManager', 'defaultTheme'];
-QueryresultController.$inject = ['ngeoQueryResult'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -21,9 +19,7 @@ QueryresultController.$inject = ['ngeoQueryResult'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './displayquerygrid.css';
-import './gmf-hidden.inc.css';
+import './displayquerygrid.scss';
 
 import angular from 'angular';
 import gmfDatasourceManager from 'gmf/datasource/Manager';
@@ -77,6 +73,8 @@ const queryresultComponent = {
 };
 myModule.component('gmfappQueryresult', queryresultComponent);
 
+QueryresultController.$inject = ['ngeoQueryResult'];
+
 /**
  * Demo, NOT USED.
  *
@@ -91,6 +89,8 @@ function QueryresultController(ngeoQueryResult) {
 }
 myModule.controller('gmfappQueryresultController', QueryresultController);
 
+MainController.$inject = ['gmfThemes', 'gmfDataSourcesManager', 'gmfThemeManager', 'defaultTheme'];
+
 /**
  * @class
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes The gmf themes service.
diff --git a/contribs/gmf/examples/displayquerygrid.css b/contribs/gmf/examples/displayquerygrid.scss
similarity index 97%
rename from contribs/gmf/examples/displayquerygrid.css
rename to contribs/gmf/examples/displayquerygrid.scss
index 1bd2f4aa477f..fd021c33e4d6 100644
--- a/contribs/gmf/examples/displayquerygrid.css
+++ b/contribs/gmf/examples/displayquerygrid.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import './gmf-hidden.inc.css';
+
 gmf-map,
 #tree-container {
   float: left;
diff --git a/contribs/gmf/examples/displayquerywindow.js b/contribs/gmf/examples/displayquerywindow.js
index c1f4ce201a51..475e58e383da 100644
--- a/contribs/gmf/examples/displayquerywindow.js
+++ b/contribs/gmf/examples/displayquerywindow.js
@@ -1,5 +1,3 @@
-MainController.$inject = ['gmfThemes', 'gmfDataSourcesManager', 'gmfThemeManager', 'defaultTheme'];
-QueryresultController.$inject = ['ngeoQueryResult'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -21,9 +19,7 @@ QueryresultController.$inject = ['ngeoQueryResult'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './displayquerywindow.css';
-import './gmf-hidden.inc.css';
+import './displayquerywindow.scss';
 
 import angular from 'angular';
 import gmfDatasourceManager from 'gmf/datasource/Manager';
@@ -75,6 +71,8 @@ const queryresultComponent = {
 };
 myModule.component('appQueryresult', queryresultComponent);
 
+QueryresultController.$inject = ['ngeoQueryResult'];
+
 /**
  * Demo, NOT USED.
  *
@@ -89,6 +87,8 @@ function QueryresultController(ngeoQueryResult) {
 }
 myModule.controller('AppQueryresultController', QueryresultController);
 
+MainController.$inject = ['gmfThemes', 'gmfDataSourcesManager', 'gmfThemeManager', 'defaultTheme'];
+
 /**
  * @class
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes The gmf themes service.
diff --git a/contribs/gmf/examples/displayquerywindow.css b/contribs/gmf/examples/displayquerywindow.scss
similarity index 97%
rename from contribs/gmf/examples/displayquerywindow.css
rename to contribs/gmf/examples/displayquerywindow.scss
index d454518b76c8..898aa022280e 100644
--- a/contribs/gmf/examples/displayquerywindow.css
+++ b/contribs/gmf/examples/displayquerywindow.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import './gmf-hidden.inc.css';
+
 gmf-map,
 #tree-container {
   float: left;
diff --git a/contribs/gmf/examples/drawfeature.js b/contribs/gmf/examples/drawfeature.js
index 819019413830..22028d94a4a8 100644
--- a/contribs/gmf/examples/drawfeature.js
+++ b/contribs/gmf/examples/drawfeature.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope', 'ngeoFeatureHelper', 'ngeoFeatures', 'ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope', 'ngeoFeatureHelper', 'ngeoFeatures', 'ngeoTo
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './drawfeature.css';
+import './drawfeature.scss';
 
 import angular from 'angular';
 import 'bootstrap/js/src/tooltip';
@@ -53,6 +51,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMiscToolActivateMgr.name,
 ]);
 
+MainController.$inject = ['$scope', 'ngeoFeatureHelper', 'ngeoFeatures', 'ngeoToolActivateMgr'];
+
 /**
  * @param {angular.IScope} $scope Angular scope.
  * @param {import('ngeo/misc/FeatureHelper').FeatureHelper} ngeoFeatureHelper Gmf feature helper service.
diff --git a/contribs/gmf/examples/drawfeature.css b/contribs/gmf/examples/drawfeature.scss
similarity index 98%
rename from contribs/gmf/examples/drawfeature.css
rename to contribs/gmf/examples/drawfeature.scss
index 8d10b977b315..c0bf9748cdc5 100644
--- a/contribs/gmf/examples/drawfeature.css
+++ b/contribs/gmf/examples/drawfeature.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
@@ -146,7 +148,6 @@ gmf-featurestyle input[type='range'] {
   left: -10px;
   border: 2px solid #fff;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   z-index: 11;
 }
diff --git a/contribs/gmf/examples/elevation.js b/contribs/gmf/examples/elevation.js
index 5c738a9c8b60..3cff113db489 100644
--- a/contribs/gmf/examples/elevation.js
+++ b/contribs/gmf/examples/elevation.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './elevation.css';
+import './elevation.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
diff --git a/contribs/gmf/examples/elevation.css b/contribs/gmf/examples/elevation.scss
similarity index 65%
rename from contribs/gmf/examples/elevation.css
rename to contribs/gmf/examples/elevation.scss
index 9be09f7d7b35..b217ffaa1220 100644
--- a/contribs/gmf/examples/elevation.css
+++ b/contribs/gmf/examples/elevation.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/featurestyle.js b/contribs/gmf/examples/featurestyle.js
index 809c7acc9c4a..f5e8112e9c3f 100644
--- a/contribs/gmf/examples/featurestyle.js
+++ b/contribs/gmf/examples/featurestyle.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope', 'ngeoFeatureHelper'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope', 'ngeoFeatureHelper'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './featurestyle.css';
+import './featurestyle.scss';
 
 import angular from 'angular';
 import gmfDrawingFeatureStyleComponent from 'gmf/drawing/featureStyleComponent';
@@ -57,6 +55,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name,
 ]);
 
+MainController.$inject = ['$scope', 'ngeoFeatureHelper'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Angular scope.
diff --git a/contribs/gmf/examples/featurestyle.css b/contribs/gmf/examples/featurestyle.scss
similarity index 96%
rename from contribs/gmf/examples/featurestyle.css
rename to contribs/gmf/examples/featurestyle.scss
index 20249386ae64..80a6d6b66902 100644
--- a/contribs/gmf/examples/featurestyle.css
+++ b/contribs/gmf/examples/featurestyle.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
@@ -57,7 +59,6 @@ gmf-featurestyle input[type='range'] {
   left: -10px;
   border: 2px solid #fff;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   z-index: 11;
 }
diff --git a/contribs/gmf/examples/importdatasource.js b/contribs/gmf/examples/importdatasource.js
index a0dcfd52c5e1..25c7d7937e66 100644
--- a/contribs/gmf/examples/importdatasource.js
+++ b/contribs/gmf/examples/importdatasource.js
@@ -19,10 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import 'ngeo/layertree/common.scss';
-import 'ngeo/layertree/timeslider.scss';
-import './common_styles.scss';
-import './importdatasource.css';
+import './importdatasource.scss';
 
 // Todo - use the 'Filter' theme instead if the 'Edit' theme
 import angular from 'angular';
diff --git a/contribs/gmf/examples/importdatasource.css b/contribs/gmf/examples/importdatasource.scss
similarity index 97%
rename from contribs/gmf/examples/importdatasource.css
rename to contribs/gmf/examples/importdatasource.scss
index 483036ceab28..24782621a2a5 100644
--- a/contribs/gmf/examples/importdatasource.css
+++ b/contribs/gmf/examples/importdatasource.scss
@@ -1,3 +1,7 @@
+@import './common_styles.scss';
+@import 'ngeo/layertree/common.scss';
+@import 'ngeo/layertree/timeslider.scss';
+
 /* CSS stolen from https://github.com/bassjobsen/typeahead.js-bootstrap-css/ */
 span.twitter-typeahead .tt-menu {
   position: absolute;
@@ -67,6 +71,8 @@ body {
 .panel {
   display: block;
   width: 60rem;
+  float: left;
+  margin: 0.5rem;
 }
 gmf-map {
   width: 71rem;
@@ -74,10 +80,6 @@ gmf-map {
   display: block;
   margin: 0.5rem;
 }
-.panel {
-  float: left;
-  margin: 0.5rem;
-}
 gmf-filterselector {
   display: block;
   width: 30rem;
@@ -264,13 +266,6 @@ a.gmf-wmscapabilitylayertreenode-expand-node.fa[aria-expanded='true']::before {
 }
 
 .gmf-wmscapabilitylayertreenode-description-toggle {
-  /* display: none; */
   display: block;
   text-align: right;
 }
-
-/*
-.gmf-wmscapabilitylayertreenode-description:hover .gmf-wmscapabilitylayertreenode-description-toggle {
-  display: block;
-}
-*/
diff --git a/contribs/gmf/examples/layertree.js b/contribs/gmf/examples/layertree.js
index d83d4ec6fff2..baa5eb734f0c 100644
--- a/contribs/gmf/examples/layertree.js
+++ b/contribs/gmf/examples/layertree.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'ngeoLocation'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,10 +19,7 @@ MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'nge
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import 'ngeo/layertree/common.scss';
-import 'ngeo/layertree/timeslider.scss';
-import './common_styles.scss';
-import './layertree.css';
+import './layertree.scss';
 
 import angular from 'angular';
 import gmfDisclaimerModule from 'gmf/disclaimer/module';
@@ -59,6 +55,8 @@ const myModule = angular.module('gmfapp', [
   gmfDisclaimerModule.name,
 ]);
 
+MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'ngeoLocation'];
+
 /**
  * @class
  * @param {import('gmf/layertree/TreeManager').LayertreeTreeManager} gmfTreeManager gmf Tree Manager
diff --git a/contribs/gmf/examples/layertree.css b/contribs/gmf/examples/layertree.scss
similarity index 96%
rename from contribs/gmf/examples/layertree.css
rename to contribs/gmf/examples/layertree.scss
index 4533c5f8e703..d2758e0844c4 100644
--- a/contribs/gmf/examples/layertree.css
+++ b/contribs/gmf/examples/layertree.scss
@@ -1,3 +1,7 @@
+@import './common_styles.scss';
+@import 'ngeo/layertree/common.scss';
+@import 'ngeo/layertree/timeslider.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/layertreeadd.js b/contribs/gmf/examples/layertreeadd.js
index 7652a5168714..836a75383790 100644
--- a/contribs/gmf/examples/layertreeadd.js
+++ b/contribs/gmf/examples/layertreeadd.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'ngeoLocation'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,10 +19,7 @@ MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'nge
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import 'ngeo/layertree/common.scss';
-import 'ngeo/layertree/timeslider.scss';
-import './common_styles.scss';
-import './layertreeadd.css';
+import './layertreeadd.scss';
 
 import angular from 'angular';
 import gmfDisclaimerModule from 'gmf/disclaimer/module';
@@ -57,6 +53,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name,
 ]);
 
+MainController.$inject = ['gmfTreeManager', 'gmfThemes', 'gmfThemeManager', 'ngeoLocation'];
+
 /**
  * @class
  * @param {import('gmf/layertree/TreeManager').LayertreeTreeManager} gmfTreeManager gmf Tree Manager
diff --git a/contribs/gmf/examples/layertreeadd.css b/contribs/gmf/examples/layertreeadd.scss
similarity index 96%
rename from contribs/gmf/examples/layertreeadd.css
rename to contribs/gmf/examples/layertreeadd.scss
index 4533c5f8e703..d2758e0844c4 100644
--- a/contribs/gmf/examples/layertreeadd.css
+++ b/contribs/gmf/examples/layertreeadd.scss
@@ -1,3 +1,7 @@
+@import './common_styles.scss';
+@import 'ngeo/layertree/common.scss';
+@import 'ngeo/layertree/timeslider.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/mobilemeasure.js b/contribs/gmf/examples/mobilemeasure.js
index a3f2b7768ef9..11f8f9cde281 100644
--- a/contribs/gmf/examples/mobilemeasure.js
+++ b/contribs/gmf/examples/mobilemeasure.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfPermalink'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['gmfPermalink'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './mobilemeasure.css';
+import './mobilemeasure.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
@@ -54,6 +52,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name,
 ]);
 
+MainController.$inject = ['gmfPermalink'];
+
 /**
  * @param {import('gmf/permalink/Permalink').PermalinkService} gmfPermalink The gmf permalink service.
  * @class
diff --git a/contribs/gmf/examples/mobilemeasure.css b/contribs/gmf/examples/mobilemeasure.scss
similarity index 96%
rename from contribs/gmf/examples/mobilemeasure.css
rename to contribs/gmf/examples/mobilemeasure.scss
index 42271370b6e0..7a31a4971a14 100644
--- a/contribs/gmf/examples/mobilemeasure.css
+++ b/contribs/gmf/examples/mobilemeasure.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 800px;
   height: 400px;
diff --git a/contribs/gmf/examples/mouseposition.js b/contribs/gmf/examples/mouseposition.js
index 8bb302f7daad..12a91160794f 100644
--- a/contribs/gmf/examples/mouseposition.js
+++ b/contribs/gmf/examples/mouseposition.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './mouseposition.css';
+import './mouseposition.scss';
 
 import angular from 'angular';
 import gmfMapModule from 'gmf/map/module';
diff --git a/contribs/gmf/examples/mouseposition.css b/contribs/gmf/examples/mouseposition.scss
similarity index 91%
rename from contribs/gmf/examples/mouseposition.css
rename to contribs/gmf/examples/mouseposition.scss
index c5be59402242..3fc52f670133 100644
--- a/contribs/gmf/examples/mouseposition.css
+++ b/contribs/gmf/examples/mouseposition.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/objectediting.js b/contribs/gmf/examples/objectediting.js
index b64595100cdd..2ce9481a8a4b 100644
--- a/contribs/gmf/examples/objectediting.js
+++ b/contribs/gmf/examples/objectediting.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfObjectEditingManager', 'gmfThemes', 'gmfTreeManager', 'ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['gmfObjectEditingManager', 'gmfThemes', 'gmfTreeManage
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './objectediting.css';
+import './objectediting.scss';
 
 import angular from 'angular';
 import gmfLayertreeComponent from 'gmf/layertree/component';
@@ -60,6 +58,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name,
 ]);
 
+MainController.$inject = ['gmfObjectEditingManager', 'gmfThemes', 'gmfTreeManager', 'ngeoToolActivateMgr'];
+
 /**
  * @param {import('gmf/objectediting/Manager').ObjecteditingManagerService} gmfObjectEditingManager The gmf
  *    ObjectEditing manager service.
diff --git a/contribs/gmf/examples/objectediting.css b/contribs/gmf/examples/objectediting.scss
similarity index 96%
rename from contribs/gmf/examples/objectediting.css
rename to contribs/gmf/examples/objectediting.scss
index 8fde78948cd9..eb17cf05703d 100644
--- a/contribs/gmf/examples/objectediting.css
+++ b/contribs/gmf/examples/objectediting.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/objecteditinghub.js b/contribs/gmf/examples/objecteditinghub.js
index 9b9a8830443b..58714a7a89cd 100644
--- a/contribs/gmf/examples/objecteditinghub.js
+++ b/contribs/gmf/examples/objecteditinghub.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$http', '$q', '$scope', 'gmfThemes', 'gmfXSDAttributes'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$http', '$q', '$scope', 'gmfThemes', 'gmfXSDAttribute
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './objecteditinghub.css';
+import './objecteditinghub.scss';
 
 import angular from 'angular';
 import gmfEditingXSDAttributes from 'gmf/editing/XSDAttributes';
@@ -42,6 +40,8 @@ const myModule = angular.module('gmfapp', [
   gmfThemeThemes.name,
 ]);
 
+MainController.$inject = ['$http', '$q', '$scope', 'gmfThemes', 'gmfXSDAttributes'];
+
 /**
  * @param {angular.IHttpService} $http Angular $http service.
  * @param {angular.IQService} $q Angular $q service.
diff --git a/contribs/gmf/examples/objecteditinghub.css b/contribs/gmf/examples/objecteditinghub.scss
similarity index 62%
rename from contribs/gmf/examples/objecteditinghub.css
rename to contribs/gmf/examples/objecteditinghub.scss
index a567e992ae98..dc943384979f 100644
--- a/contribs/gmf/examples/objecteditinghub.css
+++ b/contribs/gmf/examples/objecteditinghub.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .gmf-oe-hub-form {
   padding: 10px;
   width: 300px;
diff --git a/contribs/gmf/examples/permalink.js b/contribs/gmf/examples/permalink.js
index cea291753879..45d58ffe74c0 100644
--- a/contribs/gmf/examples/permalink.js
+++ b/contribs/gmf/examples/permalink.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './permalink.css';
+import './permalink.scss';
 
 import angular from 'angular';
 import gmfMapModule from 'gmf/map/module';
diff --git a/contribs/gmf/examples/permalink.css b/contribs/gmf/examples/permalink.scss
similarity index 83%
rename from contribs/gmf/examples/permalink.css
rename to contribs/gmf/examples/permalink.scss
index 7a6c3bf6863e..5944fa08f4bd 100644
--- a/contribs/gmf/examples/permalink.css
+++ b/contribs/gmf/examples/permalink.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/print.js b/contribs/gmf/examples/print.js
index f7870b016a04..77a6ddb3ff06 100644
--- a/contribs/gmf/examples/print.js
+++ b/contribs/gmf/examples/print.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfThemes'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,9 +19,7 @@ MainController.$inject = ['gmfThemes'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './print.css';
-import './gmf-hidden.inc.css';
+import './print.scss';
 
 import angular from 'angular';
 import gmfLayertreeComponent from 'gmf/layertree/component';
@@ -51,6 +48,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name, //for ngeo.map.FeatureOverlay, perhaps remove me
 ]);
 
+MainController.$inject = ['gmfThemes'];
+
 /**
  * @class
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes The gmf themes service.
diff --git a/contribs/gmf/examples/print.css b/contribs/gmf/examples/print.scss
similarity index 98%
rename from contribs/gmf/examples/print.css
rename to contribs/gmf/examples/print.scss
index 13503cc77d5f..d0904b9aa9e6 100644
--- a/contribs/gmf/examples/print.css
+++ b/contribs/gmf/examples/print.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import './gmf-hidden.inc.css';
+
 gmf-map,
 #tree-container {
   float: left;
diff --git a/contribs/gmf/examples/profile.js b/contribs/gmf/examples/profile.js
index 720c4ade6ea0..743f06f7a45a 100644
--- a/contribs/gmf/examples/profile.js
+++ b/contribs/gmf/examples/profile.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2014-2024 Camptocamp SA
@@ -20,9 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './profile.css';
-import 'ngeo/profile/profile.scss';
+import './profile.scss';
 
 import angular from 'angular';
 import gmfPermalinkPermalink from 'gmf/permalink/Permalink';
@@ -53,6 +50,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name, // for ngeo.map.FeatureOverlay, perhaps remove me
 ]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @param {angular.IScope} $scope Angular scope.
  * @class
diff --git a/contribs/gmf/examples/profile.css b/contribs/gmf/examples/profile.scss
similarity index 92%
rename from contribs/gmf/examples/profile.css
rename to contribs/gmf/examples/profile.scss
index a015280a62f0..95f8d511e6bd 100644
--- a/contribs/gmf/examples/profile.css
+++ b/contribs/gmf/examples/profile.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/profile/profile.scss';
+
 gmf-map {
   width: 60rem;
   height: 30rem;
diff --git a/contribs/gmf/examples/search.js b/contribs/gmf/examples/search.js
index 3629fdde9fe7..18a61a8967da 100644
--- a/contribs/gmf/examples/search.js
+++ b/contribs/gmf/examples/search.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['gmfThemes'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,9 +19,7 @@ MainController.$inject = ['gmfThemes'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './search.css';
-import 'ngeo/search/search.scss';
+import './search.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
@@ -51,6 +48,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMapModule.name, // for ngeo.map.FeatureOverlay, perhaps remove me
 ]);
 
+MainController.$inject = ['gmfThemes'];
+
 /**
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes Themes service.
  * @class
diff --git a/contribs/gmf/examples/search.css b/contribs/gmf/examples/search.scss
similarity index 97%
rename from contribs/gmf/examples/search.css
rename to contribs/gmf/examples/search.scss
index 94d177b5c7ed..b494059430d4 100644
--- a/contribs/gmf/examples/search.css
+++ b/contribs/gmf/examples/search.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/search/search.scss';
+
 #message {
   width: 300px;
 }
diff --git a/contribs/gmf/examples/share.js b/contribs/gmf/examples/share.js
index ae95f9c6d9f0..05cb02ffde89 100644
--- a/contribs/gmf/examples/share.js
+++ b/contribs/gmf/examples/share.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './share.css';
+import './share.scss';
 
 import angular from 'angular';
 import gmfPermalinkShareComponent from 'gmf/permalink/shareComponent';
diff --git a/contribs/gmf/examples/share.css b/contribs/gmf/examples/share.scss
similarity index 78%
rename from contribs/gmf/examples/share.css
rename to contribs/gmf/examples/share.scss
index 9410a797ec96..dd9e9d066425 100644
--- a/contribs/gmf/examples/share.css
+++ b/contribs/gmf/examples/share.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .share {
   margin: 3rem 0;
   width: 20vw;
diff --git a/contribs/gmf/examples/simple.js b/contribs/gmf/examples/simple.js
index 13efe044bbb2..4a6954402f25 100644
--- a/contribs/gmf/examples/simple.js
+++ b/contribs/gmf/examples/simple.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './simple.css';
+import './simple.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
diff --git a/examples/permalink.css b/contribs/gmf/examples/simple.scss
similarity index 65%
rename from examples/permalink.css
rename to contribs/gmf/examples/simple.scss
index 9be09f7d7b35..b217ffaa1220 100644
--- a/examples/permalink.css
+++ b/contribs/gmf/examples/simple.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/themeselector.js b/contribs/gmf/examples/themeselector.js
index 7f08a834ea5f..cfdc2b8d897a 100644
--- a/contribs/gmf/examples/themeselector.js
+++ b/contribs/gmf/examples/themeselector.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$http', 'gmfThemes', 'gmfThemeManager'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$http', 'gmfThemes', 'gmfThemeManager'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './themeselector.css';
+import './themeselector.scss';
 
 import angular from 'angular';
 import gmfThemeModule from 'gmf/theme/module';
@@ -31,6 +29,8 @@ import options from './options';
 /** @type {angular.IModule} **/
 const myModule = angular.module('gmfapp', ['gettext', gmfLayertreeTreeManager.name, gmfThemeModule.name]);
 
+MainController.$inject = ['$http', 'gmfThemes', 'gmfThemeManager'];
+
 /**
  * @class
  * @param {angular.IHttpService} $http Angular's $http service.
diff --git a/contribs/gmf/examples/themeselector.css b/contribs/gmf/examples/themeselector.scss
similarity index 92%
rename from contribs/gmf/examples/themeselector.css
rename to contribs/gmf/examples/themeselector.scss
index 13b2eff4267d..8ae145158c15 100644
--- a/contribs/gmf/examples/themeselector.css
+++ b/contribs/gmf/examples/themeselector.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .gmf-theme-selector {
   list-style: none;
   margin: 0;
diff --git a/contribs/gmf/examples/timeslider-ref.png b/contribs/gmf/examples/timeslider-ref.png
index 0f07b6d2070a..e899bedf8001 100644
Binary files a/contribs/gmf/examples/timeslider-ref.png and b/contribs/gmf/examples/timeslider-ref.png differ
diff --git a/contribs/gmf/examples/timeslider.js b/contribs/gmf/examples/timeslider.js
index 391fdb6c7ae0..e41b5dc50e2e 100644
--- a/contribs/gmf/examples/timeslider.js
+++ b/contribs/gmf/examples/timeslider.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope', 'ngeoWMSTime'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,9 +19,7 @@ MainController.$inject = ['$scope', 'ngeoWMSTime'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import 'ngeo/layertree/timeslider.scss';
-import './common_styles.scss';
-import './timeslider.css';
+import './timeslider.scss';
 
 import angular from 'angular';
 import gmfLayertreeTimeSliderComponent from 'gmf/layertree/timeSliderComponent';
@@ -37,6 +34,8 @@ const myModule = angular.module('gmfapp', [
   ngeoMiscWMSTime.name,
 ]);
 
+MainController.$inject = ['$scope', 'ngeoWMSTime'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Angular scope.
diff --git a/contribs/gmf/examples/timeslider.css b/contribs/gmf/examples/timeslider.scss
similarity index 52%
rename from contribs/gmf/examples/timeslider.css
rename to contribs/gmf/examples/timeslider.scss
index 2ae8ae9125f8..0a94eeeb5541 100644
--- a/contribs/gmf/examples/timeslider.css
+++ b/contribs/gmf/examples/timeslider.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/layertree/timeslider.scss';
+
 ul {
   width: 50%;
 }
diff --git a/contribs/gmf/examples/wfspermalink.js b/contribs/gmf/examples/wfspermalink.js
index cbcba3241859..6c74ffcfc243 100644
--- a/contribs/gmf/examples/wfspermalink.js
+++ b/contribs/gmf/examples/wfspermalink.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './wfspermalink.css';
+import './wfspermalink.scss';
 
 import angular from 'angular';
 import gmfMapModule from 'gmf/map/module';
diff --git a/contribs/gmf/examples/wfspermalink.css b/contribs/gmf/examples/wfspermalink.scss
similarity index 98%
rename from contribs/gmf/examples/wfspermalink.css
rename to contribs/gmf/examples/wfspermalink.scss
index d129b3d9026d..75bd0e8c3a9d 100644
--- a/contribs/gmf/examples/wfspermalink.css
+++ b/contribs/gmf/examples/wfspermalink.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/contribs/gmf/examples/xsdattributes.js b/contribs/gmf/examples/xsdattributes.js
index 5b360b318a40..018a593fef35 100644
--- a/contribs/gmf/examples/xsdattributes.js
+++ b/contribs/gmf/examples/xsdattributes.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$timeout', 'gmfThemes', 'gmfXSDAttributes'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$timeout', 'gmfThemes', 'gmfXSDAttributes'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './xsdattributes.css';
+import './xsdattributes.scss';
 
 import angular from 'angular';
 import gmfThemeThemes from 'gmf/theme/Themes';
@@ -39,6 +37,8 @@ const myModule = angular.module('gmfapp', [
   ngeoEditingAttributesComponent.name,
 ]);
 
+MainController.$inject = ['$timeout', 'gmfThemes', 'gmfXSDAttributes'];
+
 /**
  * @param {angular.ITimeoutService} $timeout Angular timeout service.
  * @param {import('gmf/theme/Themes').ThemesService} gmfThemes The gmf themes service.
diff --git a/contribs/gmf/examples/xsdattributes.css b/contribs/gmf/examples/xsdattributes.scss
similarity index 52%
rename from contribs/gmf/examples/xsdattributes.css
rename to contribs/gmf/examples/xsdattributes.scss
index aca256e836b8..dc455c14a30b 100644
--- a/contribs/gmf/examples/xsdattributes.css
+++ b/contribs/gmf/examples/xsdattributes.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .layers-list {
   max-width: 100%;
 }
diff --git a/docs/guidelines.md b/docs/guidelines.md
index e258246be8f6..8517fc1e8d04 100644
--- a/docs/guidelines.md
+++ b/docs/guidelines.md
@@ -389,7 +389,13 @@ We choose units that don't depend on parent tags and are relative.
 - `vw`: `1 vw` is 1/100th of the width of the viewport.
 - `vh`: `1 vh` is 1/100th of the height of the viewport.
 
-### CSS variable
+### CSS and SCSS rule priorities
+
+If you have the same specificity for two rule, but one in a `css` file, and one in a `scss` file,
+and you load both rule into a same `scss` file, then the rule in the `scss` will always
+have the priority.
+
+### CSS and SCSS variable
 
 Now it's possible to configure some variable in the CSS to make the variable,
 they should be defined and used like that:
diff --git a/examples/animation.js b/examples/animation.js
index 366ddc42394e..218fb30922d1 100644
--- a/examples/animation.js
+++ b/examples/animation.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$timeout'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2014-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$timeout'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './animation.css';
+import './animation.scss';
 
 import angular from 'angular';
 import olMap from 'ol/Map';
@@ -50,6 +48,8 @@ const mapComponent = {
 };
 myModule.component('appMap', mapComponent);
 
+MainController.$inject = ['$timeout'];
+
 /**
  * The application's main controller.
  *
diff --git a/examples/animation.css b/examples/animation.scss
similarity index 94%
rename from examples/animation.css
rename to examples/animation.scss
index df2e93b82494..a22ac0b894d5 100644
--- a/examples/animation.css
+++ b/examples/animation.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 html,
 body {
   position: relative;
diff --git a/examples/attributes.js b/examples/attributes.js
index ebef39c63ae7..1c8f11929e39 100644
--- a/examples/attributes.js
+++ b/examples/attributes.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$http', '$timeout', '$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -31,6 +30,8 @@ import ngeoMapModule from 'ngeo/map/module';
 /** @type {angular.IModule} */
 const myModule = angular.module('app', ['gettext', ngeoMapModule.name, ngeoEditingAttributesComponent.name]);
 
+MainController.$inject = ['$http', '$timeout', '$scope'];
+
 /**
  * @param {angular.IHttpService} $http Angular http service.
  * @param {angular.ITimeoutService} $timeout Angular timeout service.
diff --git a/examples/backgroundlayer.js b/examples/backgroundlayer.js
index b718bbb46f8a..388e7cf5f405 100644
--- a/examples/backgroundlayer.js
+++ b/examples/backgroundlayer.js
@@ -1,5 +1,3 @@
-MainController.$inject = ['$scope'];
-BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -21,8 +19,7 @@ BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './backgroundlayer.css';
+import './backgroundlayer.scss';
 
 import angular from 'angular';
 import ngeoSourceAsitVD from 'ngeo/source/AsitVD';
@@ -75,6 +72,8 @@ const backgroundlayerComponent = {
 };
 myModule.component('appBackgroundlayer', backgroundlayerComponent);
 
+BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
+
 /**
  * @class
  * @param {angular.IHttpService} $http Angular http service.
@@ -146,6 +145,8 @@ BackgroundlayerController.prototype.getLayer_ = function (layerName) {
 };
 myModule.controller('AppBackgroundlayerController', BackgroundlayerController);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Controller scope.
diff --git a/examples/backgroundlayer.css b/examples/backgroundlayer.scss
similarity index 58%
rename from examples/backgroundlayer.css
rename to examples/backgroundlayer.scss
index cfadc8dbf599..3e6c9bd35415 100644
--- a/examples/backgroundlayer.css
+++ b/examples/backgroundlayer.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .backgroundlayer-selector {
   width: 200px;
 }
diff --git a/examples/backgroundlayerdropdown.js b/examples/backgroundlayerdropdown.js
index ae0ed068e1c4..9ef79249631c 100644
--- a/examples/backgroundlayerdropdown.js
+++ b/examples/backgroundlayerdropdown.js
@@ -1,5 +1,3 @@
-MainController.$inject = ['$scope'];
-BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -21,8 +19,7 @@ BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './backgroundlayerdropdown.css';
+import './backgroundlayerdropdown.scss';
 
 import angular from 'angular';
 import ngeoSourceAsitVD from 'ngeo/source/AsitVD';
@@ -73,6 +70,8 @@ const backgroundlayerComponent = {
 };
 myModule.component('appBackgroundlayer', backgroundlayerComponent);
 
+BackgroundlayerController.$inject = ['$http', 'ngeoBackgroundLayerMgr'];
+
 /**
  * @class
  * @param {angular.IHttpService} $http Angular http service.
@@ -133,6 +132,8 @@ BackgroundlayerController.prototype.createLayer_ = function (layerName) {
 };
 myModule.controller('AppBackgroundlayerController', BackgroundlayerController);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Controller scope.
diff --git a/examples/backgroundlayerdropdown.css b/examples/backgroundlayerdropdown.scss
similarity index 55%
rename from examples/backgroundlayerdropdown.css
rename to examples/backgroundlayerdropdown.scss
index d9bca845b7d7..ba6d31ff1834 100644
--- a/examples/backgroundlayerdropdown.css
+++ b/examples/backgroundlayerdropdown.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .dropdown button {
   min-width: 100px;
 }
diff --git a/examples/colorpicker.js b/examples/colorpicker.js
index ce33532dbc70..d2ed023c9be8 100644
--- a/examples/colorpicker.js
+++ b/examples/colorpicker.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './colorpicker.css';
+import './colorpicker.scss';
 
 import angular from 'angular';
 import ngeoMiscColorpickerComponent from 'ngeo/misc/colorpickerComponent';
@@ -58,6 +56,8 @@ function ColorPickerController() {
 }
 myModule.controller('AppColorpickerController', ColorPickerController);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Controller scope.
diff --git a/examples/colorpicker.css b/examples/colorpicker.scss
similarity index 95%
rename from examples/colorpicker.css
rename to examples/colorpicker.scss
index 1eb76316d5bb..129672941b34 100644
--- a/examples/colorpicker.css
+++ b/examples/colorpicker.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 body {
   padding: 10px;
 }
@@ -35,7 +37,6 @@ body {
   left: -10px;
   border: 2px solid #fff;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0;
   z-index: 11;
 }
diff --git a/examples/common_styles.scss b/examples/common_styles.scss
index c9538178ad7e..9a793da55188 100644
--- a/examples/common_styles.scss
+++ b/examples/common_styles.scss
@@ -1,7 +1,7 @@
-@import 'ol/ol.css';
+@import 'ol/ol';
 @import 'ngeo/sass/font.scss';
-@import 'bootstrap/dist/css/bootstrap.css';
+@import 'bootstrap/dist/css/bootstrap';
 @import 'ngeo/sass/typeahead.scss';
 @import 'ngeo/sass/jquery-ui.scss';
 @import './vars.scss';
-@import './base.css';
+@import './base';
diff --git a/examples/createfeature.js b/examples/createfeature.js
index f59fb4c914e4..337f1b3ed15c 100644
--- a/examples/createfeature.js
+++ b/examples/createfeature.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['ngeoToolActivateMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './createfeature.css';
+import './createfeature.scss';
 
 import angular from 'angular';
 import ngeoEditingCreatefeatureComponent from 'ngeo/editing/createfeatureComponent';
@@ -48,6 +46,8 @@ const myModule = angular.module('app', [
   ngeoEditingCreatefeatureComponent.name,
 ]);
 
+MainController.$inject = ['ngeoToolActivateMgr'];
+
 /**
  * @param {import('ngeo/misc/ToolActivateMgr').ToolActivateMgr} ngeoToolActivateMgr Ngeo ToolActivate
  *    manager service.
diff --git a/examples/createfeature.css b/examples/createfeature.scss
similarity index 95%
rename from examples/createfeature.css
rename to examples/createfeature.scss
index e7dc836ce019..4d5b73b74112 100644
--- a/examples/createfeature.css
+++ b/examples/createfeature.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .ngeo-createfeature-point:before {
   content: 'Point';
 }
diff --git a/examples/datepicker-ref.png b/examples/datepicker-ref.png
index 0f05f35e3e33..be535f469a0f 100644
Binary files a/examples/datepicker-ref.png and b/examples/datepicker-ref.png differ
diff --git a/examples/datepicker.js b/examples/datepicker.js
index 4f56bae40b34..a7bb83aca99d 100644
--- a/examples/datepicker.js
+++ b/examples/datepicker.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoTime'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['ngeoTime'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './datepicker.css';
-import './common_styles.scss';
+import './datepicker.scss';
 
 import angular from 'angular';
 import ngeoMiscDatepickerComponent from 'ngeo/misc/datepickerComponent';
@@ -31,6 +29,8 @@ import {TimePropertyWidgetEnum, TimePropertyModeEnum} from 'ngeo/datasource/OGC'
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', ngeoMiscDatepickerComponent.name, ngeoMiscTime.name]);
 
+MainController.$inject = ['ngeoTime'];
+
 /**
  * @class
  * @param {import('ngeo/misc/Time').default} ngeoTime time service.
diff --git a/contribs/gmf/examples/datepicker.css b/examples/datepicker.scss
similarity index 92%
rename from contribs/gmf/examples/datepicker.css
rename to examples/datepicker.scss
index 5b3bfe8adfcd..800f88ef0584 100644
--- a/contribs/gmf/examples/datepicker.css
+++ b/examples/datepicker.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 li {
   margin: 20px;
   list-style: none;
diff --git a/examples/datetimepicker.js b/examples/datetimepicker.js
index 299d08327a45..5dd374276430 100644
--- a/examples/datetimepicker.js
+++ b/examples/datetimepicker.js
@@ -19,9 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
 import './datetimepicker.scss';
-import 'jquery-datetimepicker/jquery.datetimepicker.css';
 
 import angular from 'angular';
 import ngeoMiscDatetimepickerComponent from 'ngeo/misc/datetimepickerComponent';
diff --git a/examples/datetimepicker.scss b/examples/datetimepicker.scss
index fd1ea6115897..1e5ff29fc45b 100644
--- a/examples/datetimepicker.scss
+++ b/examples/datetimepicker.scss
@@ -21,4 +21,5 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@import '~jquery-datetimepicker/jquery.datetimepicker.css';
+@import './common_styles.scss';
+@import 'jquery-datetimepicker/jquery.datetimepicker.css';
diff --git a/examples/disclaimer.js b/examples/disclaimer.js
index cd4861c39112..318222fd00e1 100644
--- a/examples/disclaimer.js
+++ b/examples/disclaimer.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoDisclaimer'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['ngeoDisclaimer'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './disclaimer.css';
+import './disclaimer.scss';
 
 import 'bootstrap/js/src/tooltip';
 import angular from 'angular';
@@ -37,6 +35,8 @@ import options from './options';
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', gmfMapComponent.name, ngeoMessageDisclaimer.name]);
 
+MainController.$inject = ['ngeoDisclaimer'];
+
 /**
  * @param {import('ngeo/message/Disclaimer').MessageDisclaimerService} ngeoDisclaimer Ngeo disclaimer
  *    service.
diff --git a/examples/disclaimer.css b/examples/disclaimer.scss
similarity index 92%
rename from examples/disclaimer.css
rename to examples/disclaimer.scss
index b78ea73a6579..1eb9a6d3e278 100644
--- a/examples/disclaimer.css
+++ b/examples/disclaimer.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .ngeo-disclaimer {
   left: 50%;
   margin: 0 0 0 -15rem;
diff --git a/examples/displaywindow.js b/examples/displaywindow.js
index 05718b86958e..082375c093ba 100644
--- a/examples/displaywindow.js
+++ b/examples/displaywindow.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2018-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './displaywindow.css';
+import './displaywindow.scss';
 
 import angular from 'angular';
 import ngeoMessageDisplaywindowComponent from 'ngeo/message/displaywindowComponent';
@@ -29,6 +27,8 @@ import ngeoMessageDisplaywindowComponent from 'ngeo/message/displaywindowCompone
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', [ngeoMessageDisplaywindowComponent.name]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @param {angular.IScope} $scope Scope.
  * @class
diff --git a/examples/displaywindow.css b/examples/displaywindow.scss
similarity index 96%
rename from examples/displaywindow.css
rename to examples/displaywindow.scss
index 460a6dfb87cf..4ca3e77b2419 100644
--- a/examples/displaywindow.css
+++ b/examples/displaywindow.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .windowcontainer {
   background-color: #fbf5ef;
   border: solid 1px black;
diff --git a/examples/drawfeature.js b/examples/drawfeature.js
index 04545a7a7d71..6f10b16af045 100644
--- a/examples/drawfeature.js
+++ b/examples/drawfeature.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope', 'ngeoFeatures', 'ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope', 'ngeoFeatures', 'ngeoToolActivateMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './drawfeature.css';
+import './drawfeature.scss';
 
 import angular from 'angular';
 import ngeoDrawModule from 'ngeo/draw/module';
@@ -44,6 +42,8 @@ const myModule = angular.module('app', [
   ngeoMiscToolActivateMgr.name,
 ]);
 
+MainController.$inject = ['$scope', 'ngeoFeatures', 'ngeoToolActivateMgr'];
+
 /**
  * @param {angular.IScope} $scope Angular scope.
  * @param {import('ol/Collection').default<import('ol/Feature').default<import('ol/geom/Geometry').default>>} ngeoFeatures Collection
diff --git a/examples/drawfeature.css b/examples/drawfeature.scss
similarity index 96%
rename from examples/drawfeature.css
rename to examples/drawfeature.scss
index 0acd8f0b229d..2d8db78d1602 100644
--- a/examples/drawfeature.css
+++ b/examples/drawfeature.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 ngeo-drawfeature {
   margin: 10px 0;
 }
diff --git a/examples/elevationProfile.js b/examples/elevationProfile.js
index ed2b9b467671..8b20918e0372 100644
--- a/examples/elevationProfile.js
+++ b/examples/elevationProfile.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$http', '$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$http', '$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './elevationProfile.css';
+import './elevationProfile.scss';
 
 import angular from 'angular';
 import EPSG2056 from 'ngeo/proj/EPSG_2056';
@@ -68,6 +66,8 @@ const typedFunctionsFactory = function (key, opt_childKey) {
   );
 };
 
+MainController.$inject = ['$http', '$scope'];
+
 /**
  * @class
  * @param {angular.IHttpService} $http The $http angular service.
diff --git a/examples/elevationProfile.css b/examples/elevationProfile.scss
similarity index 58%
rename from examples/elevationProfile.css
rename to examples/elevationProfile.scss
index 6ade835ff72a..d36d224f6b16 100644
--- a/examples/elevationProfile.css
+++ b/examples/elevationProfile.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .profile {
   width: 450px;
   height: 250px;
diff --git a/examples/googlestreetview.js b/examples/googlestreetview.js
index 8ec95c32b1dc..a364d11ef8cf 100644
--- a/examples/googlestreetview.js
+++ b/examples/googlestreetview.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2017-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['ngeoToolActivateMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './googlestreetview.css';
+import './googlestreetview.scss';
 
 import angular from 'angular';
 import olMap from 'ol/Map';
@@ -47,6 +45,8 @@ const myModule = angular.module('app', [
   ngeoMiscToolActivateMgr.name,
 ]);
 
+MainController.$inject = ['ngeoToolActivateMgr'];
+
 /**
  * @param {import('ngeo/misc/ToolActivateMgr').ToolActivateMgr} ngeoToolActivateMgr
  *    Ngeo ToolActivate manager service.
diff --git a/examples/mapillarystreetview.css b/examples/googlestreetview.scss
similarity index 85%
rename from examples/mapillarystreetview.css
rename to examples/googlestreetview.scss
index 1d3a44073e1e..a2b10ecd0ac4 100644
--- a/examples/mapillarystreetview.css
+++ b/examples/googlestreetview.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 ngeo-streetview {
   display: block;
   height: 40rem;
diff --git a/examples/grid.js b/examples/grid.js
index 555aa2d62b67..599fa9ea13e4 100644
--- a/examples/grid.js
+++ b/examples/grid.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './grid.css';
+import './grid.scss';
 
 import angular from 'angular';
 import ngeoGridConfig from 'ngeo/grid/Config';
diff --git a/examples/grid.css b/examples/grid.scss
similarity index 92%
rename from examples/grid.css
rename to examples/grid.scss
index b027c7362b24..f9f379be3fb9 100644
--- a/examples/grid.css
+++ b/examples/grid.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .ngeo-grid-table-container {
   height: 154px;
   overflow: auto;
diff --git a/examples/importfeatures.js b/examples/importfeatures.js
index bcb125b4733b..5aad1cc37fb7 100644
--- a/examples/importfeatures.js
+++ b/examples/importfeatures.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -38,6 +37,8 @@ import olSourceVector from 'ol/source/Vector';
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', gmfMapComponent.name, ngeoMiscFilereaderComponent.name]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Scope.
diff --git a/examples/interactionbtngroup.js b/examples/interactionbtngroup.js
index 1d2974bfd63e..9b04f53ef5b8 100644
--- a/examples/interactionbtngroup.js
+++ b/examples/interactionbtngroup.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './interactionbtngroup.css';
+import './interactionbtngroup.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
diff --git a/examples/interactionbtngroup.css b/examples/interactionbtngroup.scss
similarity index 58%
rename from examples/interactionbtngroup.css
rename to examples/interactionbtngroup.scss
index d07faa82acd1..0dd7410c1355 100644
--- a/examples/interactionbtngroup.css
+++ b/examples/interactionbtngroup.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 [ngeo-btn] {
   width: 100px;
   margin: 5px;
diff --git a/examples/layerorder.js b/examples/layerorder.js
index 769e11871994..5e5fbed7b529 100644
--- a/examples/layerorder.js
+++ b/examples/layerorder.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './layerorder.css';
+import './layerorder.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
@@ -40,6 +38,8 @@ import {MAPSERVER_PROXY} from './url';
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', gmfMapComponent.name, ngeoMiscSortableComponent.name]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @param {angular.IScope} $scope Scope.
  * @class
diff --git a/examples/layerorder.css b/examples/layerorder.scss
similarity index 93%
rename from examples/layerorder.css
rename to examples/layerorder.scss
index 874771379268..3b47e6a8df1a 100644
--- a/examples/layerorder.css
+++ b/examples/layerorder.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 ul {
   padding: 0;
 }
diff --git a/examples/locationsearch.js b/examples/locationsearch.js
index f8c4019f656e..1716d8a529c5 100644
--- a/examples/locationsearch.js
+++ b/examples/locationsearch.js
@@ -1,4 +1,3 @@
-SearchController.$inject = ['ngeoCreateLocationSearchBloodhound'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,9 +19,7 @@ SearchController.$inject = ['ngeoCreateLocationSearchBloodhound'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './locationsearch.css';
-import 'ngeo/search/search.scss';
+import './locationsearch.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
@@ -53,6 +50,8 @@ const locationSearchComponent = {
 };
 appmodule.component('appLocationSearch', locationSearchComponent);
 
+SearchController.$inject = ['ngeoCreateLocationSearchBloodhound'];
+
 /**
  * @class
  * @param {import('ngeo/search/createLocationSearchBloodhound').createLocationSearchBloodhoundFunction} ngeoCreateLocationSearchBloodhound
diff --git a/examples/search.css b/examples/locationsearch.scss
similarity index 95%
rename from examples/search.css
rename to examples/locationsearch.scss
index 23d548762ac2..75c697210619 100644
--- a/examples/search.css
+++ b/examples/locationsearch.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/search/search.scss';
+
 /* CSS from https://github.com/bassjobsen/typeahead.js-bootstrap-css/ (MIT license) */
 span.twitter-typeahead .tt-menu {
   position: absolute;
diff --git a/examples/mapfishprint.js b/examples/mapfishprint.js
index 621b79331204..2f0090039d8d 100644
--- a/examples/mapfishprint.js
+++ b/examples/mapfishprint.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$timeout', 'ngeoCreatePrint', 'ngeoPrintUtils'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -77,6 +76,8 @@ const PRINT_DPI_ = 72;
  */
 const PRINT_PAPER_SIZE_ = [555, 675];
 
+MainController.$inject = ['$timeout', 'ngeoCreatePrint', 'ngeoPrintUtils'];
+
 /**
  * @class
  * @param {angular.ITimeoutService} $timeout Angular timeout service.
diff --git a/examples/mapillarystreetview.js b/examples/mapillarystreetview.js
index 5b3513d7f337..8bebf4c21ac2 100644
--- a/examples/mapillarystreetview.js
+++ b/examples/mapillarystreetview.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2021-2024 Camptocamp SA
@@ -20,9 +19,7 @@ MainController.$inject = ['ngeoToolActivateMgr'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './mapillarystreetview.css';
-import 'mapillary-js/dist/mapillary.css';
+import './mapillarystreetview.scss';
 
 import angular from 'angular';
 import olMap from 'ol/Map';
@@ -48,6 +45,8 @@ const myModule = angular.module('app', [
   ngeoMiscToolActivateMgr.name,
 ]);
 
+MainController.$inject = ['ngeoToolActivateMgr'];
+
 /**
  * @param {import('ngeo/misc/ToolActivateMgr').ToolActivateMgr} ngeoToolActivateMgr
  *    Ngeo ToolActivate manager service.
diff --git a/examples/googlestreetview.css b/examples/mapillarystreetview.scss
similarity index 72%
rename from examples/googlestreetview.css
rename to examples/mapillarystreetview.scss
index 1d3a44073e1e..4cefe3d31189 100644
--- a/examples/googlestreetview.css
+++ b/examples/mapillarystreetview.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'mapillary-js/dist/mapillary.css';
+
 ngeo-streetview {
   display: block;
   height: 40rem;
diff --git a/examples/mapswipe.js b/examples/mapswipe.js
index 1c510f166b2d..36ea04c52b60 100644
--- a/examples/mapswipe.js
+++ b/examples/mapswipe.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './mapswipe.css';
+import './mapswipe.scss';
 
 import angular from 'angular';
 import ngeoMapswipeModule from 'ngeo/map/swipe';
diff --git a/examples/mapswipe.css b/examples/mapswipe.scss
similarity index 95%
rename from examples/mapswipe.css
rename to examples/mapswipe.scss
index ebdcc17deb45..aad3d8e8a43b 100644
--- a/examples/mapswipe.css
+++ b/examples/mapswipe.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 #map,
 ngeo-mapswipe {
   width: 600px;
diff --git a/examples/measure-ref.png b/examples/measure-ref.png
index f71d2adce3d2..5139ac83e0dd 100644
Binary files a/examples/measure-ref.png and b/examples/measure-ref.png differ
diff --git a/examples/measure.js b/examples/measure.js
index 6476a40aa191..567a998340e7 100644
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -1,4 +1,3 @@
-MeasuretoolsController.$inject = ['$scope', '$compile', '$sce', '$filter', 'gettextCatalog'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MeasuretoolsController.$inject = ['$scope', '$compile', '$sce', '$filter', 'gett
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './measure.css';
-import './common_styles.scss';
+import './measure.scss';
 
 import angular from 'angular';
 import ngeoInteractionMeasureArea from 'ngeo/interaction/MeasureArea';
@@ -82,6 +80,8 @@ const measuretoolsComponent = {
 };
 myModule.component('appMeasuretools', measuretoolsComponent);
 
+MeasuretoolsController.$inject = ['$scope', '$compile', '$sce', '$filter', 'gettextCatalog'];
+
 /**
  * @param {angular.IScope} $scope Angular scope.
  * @param {angular.ICompileService} $compile Angular compile service.
diff --git a/examples/measure.css b/examples/measure.scss
similarity index 95%
rename from examples/measure.css
rename to examples/measure.scss
index 828ce6dc925b..0fb41614eae9 100644
--- a/examples/measure.css
+++ b/examples/measure.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 [ngeo-btn-group] {
   padding: 5px;
 }
diff --git a/examples/mobilegeolocation.js b/examples/mobilegeolocation.js
index 420c5fa9ff5f..4b7a2637d779 100644
--- a/examples/mobilegeolocation.js
+++ b/examples/mobilegeolocation.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './mobilegeolocation.css';
+import './mobilegeolocation.scss';
 
 import angular from 'angular';
 import olMap from 'ol/Map';
@@ -36,6 +34,8 @@ import ngeoMapFeatureOverlayMgr from 'ngeo/map/FeatureOverlayMgr';
 /** @type {angular.IModule} **/
 const appmodule = angular.module('app', ['gettext', ngeoGeolocation.name, gmfMapComponent.name]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @param {angular.IScope} $scope Scope.
  * @class
diff --git a/examples/mobilegeolocation.css b/examples/mobilegeolocation.scss
similarity index 83%
rename from examples/mobilegeolocation.css
rename to examples/mobilegeolocation.scss
index eac9a8516096..570d89ba9dea 100644
--- a/examples/mobilegeolocation.css
+++ b/examples/mobilegeolocation.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 button[ngeo-geolocation]:after {
   content: 'Toggle tracking';
 }
diff --git a/examples/notification.js b/examples/notification.js
index 0cfc3b0da6fd..5ff314451280 100644
--- a/examples/notification.js
+++ b/examples/notification.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './notification.css';
+import './notification.scss';
 
 import 'bootstrap/js/src/tooltip';
 import angular from 'angular';
diff --git a/examples/notification.css b/examples/notification.scss
similarity index 84%
rename from examples/notification.css
rename to examples/notification.scss
index fbb22cf7b12c..ac7d0a0022ea 100644
--- a/examples/notification.css
+++ b/examples/notification.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .buttons {
   width: 300px;
 }
diff --git a/examples/permalink.js b/examples/permalink.js
index bdfac861de88..da754f60ad97 100644
--- a/examples/permalink.js
+++ b/examples/permalink.js
@@ -1,5 +1,3 @@
-DrawComponentController.$inject = ['$scope', 'ngeoLocation'];
-MapComponentController.$inject = ['ngeoLocation', 'ngeoDebounce'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2014-2024 Camptocamp SA
@@ -21,11 +19,10 @@ MapComponentController.$inject = ['ngeoLocation', 'ngeoDebounce'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
+import './permalink.scss';
 
 import angular from 'angular';
 import ngeoFormatFeatureHash from 'ngeo/format/FeatureHash';
-import './permalink.css';
 import gmfMapComponent from 'gmf/map/component';
 import options from './options';
 import ngeoMiscDebounce from 'ngeo/misc/debounce';
@@ -67,6 +64,8 @@ const mapComponent = {
 };
 myModule.component('appMap', mapComponent);
 
+MapComponentController.$inject = ['ngeoLocation', 'ngeoDebounce'];
+
 /**
  * @param {import('ngeo/statemanager/Location').StatemanagerLocation} ngeoLocation ngeo Location service.
  * @param {import('ngeo/misc/debounce').miscDebounce<function(import('ol/events/Event').default): void>} ngeoDebounce
@@ -152,6 +151,8 @@ const drawComponent = {
 };
 myModule.component('appDraw', drawComponent);
 
+DrawComponentController.$inject = ['$scope', 'ngeoLocation'];
+
 /**
  * @param {angular.IScope} $scope Scope.
  * @param {import('ngeo/statemanager/Location').StatemanagerLocation} ngeoLocation ngeo Location service.
diff --git a/contribs/gmf/examples/simple.css b/examples/permalink.scss
similarity index 65%
rename from contribs/gmf/examples/simple.css
rename to examples/permalink.scss
index 9be09f7d7b35..b217ffaa1220 100644
--- a/contribs/gmf/examples/simple.css
+++ b/examples/permalink.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 gmf-map {
   width: 600px;
   height: 400px;
diff --git a/examples/popover.js b/examples/popover.js
index 2e1f78967542..bf5c3e79083d 100644
--- a/examples/popover.js
+++ b/examples/popover.js
@@ -19,8 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './popover.css';
+import './popover.scss';
 
 import angular from 'angular';
 import ngeoMessagePopoverComponent from 'ngeo/message/popoverComponent';
diff --git a/examples/popover.css b/examples/popover.scss
similarity index 85%
rename from examples/popover.css
rename to examples/popover.scss
index bb06bfba12ba..670ec15080d6 100644
--- a/examples/popover.css
+++ b/examples/popover.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .ngeo-popover {
   margin: 30px;
 }
diff --git a/examples/popupservice.js b/examples/popupservice.js
index 4ca379d57131..04d00ac4401f 100644
--- a/examples/popupservice.js
+++ b/examples/popupservice.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$sce', 'ngeoCreatePopup'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$sce', 'ngeoCreatePopup'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './popupservice.css';
+import './popupservice.scss';
 
 import 'bootstrap/js/src/tooltip';
 import angular from 'angular';
@@ -30,6 +28,8 @@ import ngeoMessagePopup from 'ngeo/message/Popup';
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', ngeoMessagePopup.name]);
 
+MainController.$inject = ['$sce', 'ngeoCreatePopup'];
+
 /**
  * @param {angular.ISCEService} $sce Angular sce service.
  * @param {import('ngeo/message/Popup').PopupFactory} ngeoCreatePopup Popup service.
diff --git a/examples/popupservice.css b/examples/popupservice.scss
similarity index 76%
rename from examples/popupservice.css
rename to examples/popupservice.scss
index c3da2114c892..797a5bae28ab 100644
--- a/examples/popupservice.css
+++ b/examples/popupservice.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .buttons .btn {
   margin: 0 0 5px 0;
 }
diff --git a/examples/query.js b/examples/query.js
index 90ff5423df03..7cc2a55367d6 100644
--- a/examples/query.js
+++ b/examples/query.js
@@ -1,5 +1,3 @@
-MainController.$inject = ['ngeoDataSources', 'ngeoToolActivateMgr', 'ngeoQueryModeSelector'];
-QueryresultController.$inject = ['ngeoQueryResult'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2016-2024 Camptocamp SA
@@ -21,12 +19,10 @@ QueryresultController.$inject = ['ngeoQueryResult'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
+import './query.scss';
 
 import angular from 'angular';
 import {MAPSERVER_PROXY, MAPSERVER_WFS_FEATURE_NS} from './url';
-import './base.css';
-import './query.css';
 import EPSG2056 from 'ngeo/proj/EPSG_2056';
 import ngeoDatasourceDataSources from 'ngeo/datasource/DataSources';
 import gmfDatasourceOGC from 'gmf/datasource/OGC';
@@ -84,6 +80,8 @@ const queryresultComponent = {
 };
 myModule.component('appQueryresult', queryresultComponent);
 
+QueryresultController.$inject = ['ngeoQueryResult'];
+
 /**
  * @param {import('ngeo/query/MapQuerent').QueryResult} ngeoQueryResult The ngeo query service.
  * @class
@@ -96,6 +94,8 @@ function QueryresultController(ngeoQueryResult) {
 }
 myModule.controller('AppQueryresultController', QueryresultController);
 
+MainController.$inject = ['ngeoDataSources', 'ngeoToolActivateMgr', 'ngeoQueryModeSelector'];
+
 /**
  * @param {import('ngeo/datasource/DataSources').DataSource} ngeoDataSources Ngeo data sources service.
  * @param {import('ngeo/misc/ToolActivateMgr').ToolActivateMgr} ngeoToolActivateMgr The ngeo ToolActivate
diff --git a/examples/query.css b/examples/query.scss
similarity index 82%
rename from examples/query.css
rename to examples/query.scss
index ed7e1bc7f6df..51ec2d46f0c7 100644
--- a/examples/query.css
+++ b/examples/query.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import './base.css';
+
 #map,
 .app-query {
   float: left;
diff --git a/examples/routing.js b/examples/routing.js
index 6058887f0944..3583c23cb167 100644
--- a/examples/routing.js
+++ b/examples/routing.js
@@ -22,9 +22,7 @@
 /**
  * This example shows the ngeo routing directive.
  */
-import './common_styles.scss';
-import 'ngeo/routing/routing.scss';
-import './routing.css';
+import './routing.scss';
 
 import angular from 'angular';
 import gmfMapComponent from 'gmf/map/component';
diff --git a/examples/routing.css b/examples/routing.scss
similarity index 93%
rename from examples/routing.css
rename to examples/routing.scss
index 6bdcf4879117..7110627cb6cf 100644
--- a/examples/routing.css
+++ b/examples/routing.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/routing/routing.scss';
+
 @media (max-width: 768px) {
   #map {
     height: 200px;
diff --git a/examples/scaleselector.js b/examples/scaleselector.js
index c8d7d107f095..92ba2275e201 100644
--- a/examples/scaleselector.js
+++ b/examples/scaleselector.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['$scope'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,8 +19,7 @@ MainController.$inject = ['$scope'];
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './scaleselector.css';
+import './scaleselector.scss';
 
 import angular from 'angular';
 import ngeoScaleSelector from 'ngeo/map/scaleselector';
@@ -35,6 +33,8 @@ import options from './options';
 /** @type {angular.IModule} **/
 const myModule = angular.module('app', ['gettext', ngeoScaleSelector.name, gmfMapComponent.name]);
 
+MainController.$inject = ['$scope'];
+
 /**
  * @class
  * @param {angular.IScope} $scope Controller scope.
diff --git a/examples/scaleselector.css b/examples/scaleselector.scss
similarity index 65%
rename from examples/scaleselector.css
rename to examples/scaleselector.scss
index f04f9b049351..8c13885c164b 100644
--- a/examples/scaleselector.css
+++ b/examples/scaleselector.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 .scaleselector {
   display: inline-block;
   min-width: 160px;
diff --git a/examples/search.js b/examples/search.js
index f608a1caa105..d44447484a64 100644
--- a/examples/search.js
+++ b/examples/search.js
@@ -1,4 +1,3 @@
-SearchController.$inject = ['$element', '$rootScope', '$compile', 'ngeoSearchCreateGeoJSONBloodhound'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2015-2024 Camptocamp SA
@@ -20,9 +19,7 @@ SearchController.$inject = ['$element', '$rootScope', '$compile', 'ngeoSearchCre
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import './common_styles.scss';
-import './search.css';
-import 'ngeo/search/search.scss';
+import './search.scss';
 
 import angular from 'angular';
 import {SEARCH} from './url';
@@ -58,6 +55,8 @@ const searchComponent = {
 };
 myModule.component('appSearch', searchComponent);
 
+SearchController.$inject = ['$element', '$rootScope', '$compile', 'ngeoSearchCreateGeoJSONBloodhound'];
+
 /**
  * @class
  * @param {JQuery} $element Element.
diff --git a/examples/locationsearch.css b/examples/search.scss
similarity index 95%
rename from examples/locationsearch.css
rename to examples/search.scss
index 23d548762ac2..75c697210619 100644
--- a/examples/locationsearch.css
+++ b/examples/search.scss
@@ -1,3 +1,6 @@
+@import './common_styles.scss';
+@import 'ngeo/search/search.scss';
+
 /* CSS from https://github.com/bassjobsen/typeahead.js-bootstrap-css/ (MIT license) */
 span.twitter-typeahead .tt-menu {
   position: absolute;
diff --git a/examples/toolActivate.js b/examples/toolActivate.js
index e1afe3c875dd..8e55b8a34b17 100644
--- a/examples/toolActivate.js
+++ b/examples/toolActivate.js
@@ -1,4 +1,3 @@
-MainController.$inject = ['ngeoToolActivateMgr'];
 // The MIT License (MIT)
 //
 // Copyright (c) 2014-2024 Camptocamp SA
@@ -50,6 +49,8 @@ const myModule = angular.module('app', [
   ngeoMiscToolActivateMgr.name,
 ]);
 
+MainController.$inject = ['ngeoToolActivateMgr'];
+
 /**
  * @param {import('ngeo/misc/ToolActivateMgr').ToolActivateMgr} ngeoToolActivateMgr ToolActivate manager.
  * @class