diff --git a/contribs/gmf/examples/backgroundlayerselector.js b/contribs/gmf/examples/backgroundlayerselector.js
index 120f6eab0be1..987c16633180 100644
--- a/contribs/gmf/examples/backgroundlayerselector.js
+++ b/contribs/gmf/examples/backgroundlayerselector.js
@@ -20,8 +20,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';
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.js b/contribs/gmf/examples/datepicker.js
index 4ebd79c23ff8..5b7fbedfa601 100644
--- a/contribs/gmf/examples/datepicker.js
+++ b/contribs/gmf/examples/datepicker.js
@@ -20,8 +20,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';
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..d130f22f2817 100644
--- a/contribs/gmf/examples/displayquerygrid.js
+++ b/contribs/gmf/examples/displayquerygrid.js
@@ -21,9 +21,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';
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..d481f159dd59 100644
--- a/contribs/gmf/examples/displayquerywindow.js
+++ b/contribs/gmf/examples/displayquerywindow.js
@@ -21,9 +21,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';
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..25dac67b9fb9 100644
--- a/contribs/gmf/examples/drawfeature.js
+++ b/contribs/gmf/examples/drawfeature.js
@@ -20,8 +20,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';
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..fa74f7c5d1d8 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;
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..72e87c4aab01 100644
--- a/contribs/gmf/examples/featurestyle.js
+++ b/contribs/gmf/examples/featurestyle.js
@@ -20,8 +20,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';
diff --git a/contribs/gmf/examples/featurestyle.css b/contribs/gmf/examples/featurestyle.scss
similarity index 97%
rename from contribs/gmf/examples/featurestyle.css
rename to contribs/gmf/examples/featurestyle.scss
index 20249386ae64..2f261bcbeff8 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;
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 98%
rename from contribs/gmf/examples/importdatasource.css
rename to contribs/gmf/examples/importdatasource.scss
index 483036ceab28..66355a99a472 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;
diff --git a/contribs/gmf/examples/layertree.js b/contribs/gmf/examples/layertree.js
index d83d4ec6fff2..0e8eb3bbd9b4 100644
--- a/contribs/gmf/examples/layertree.js
+++ b/contribs/gmf/examples/layertree.js
@@ -20,10 +20,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';
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..300250cee4ec 100644
--- a/contribs/gmf/examples/layertreeadd.js
+++ b/contribs/gmf/examples/layertreeadd.js
@@ -20,10 +20,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';
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..c31168d5f089 100644
--- a/contribs/gmf/examples/mobilemeasure.js
+++ b/contribs/gmf/examples/mobilemeasure.js
@@ -20,8 +20,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';
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..355d6a0986b4 100644
--- a/contribs/gmf/examples/objectediting.js
+++ b/contribs/gmf/examples/objectediting.js
@@ -20,8 +20,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';
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..ba434360c8c1 100644
--- a/contribs/gmf/examples/objecteditinghub.js
+++ b/contribs/gmf/examples/objecteditinghub.js
@@ -20,8 +20,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';
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..9d14e105b7ce 100644
--- a/contribs/gmf/examples/print.js
+++ b/contribs/gmf/examples/print.js
@@ -20,9 +20,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';
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..e9474ea0a8bb 100644
--- a/contribs/gmf/examples/profile.js
+++ b/contribs/gmf/examples/profile.js
@@ -20,9 +20,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';
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..37e4bb1a4881 100644
--- a/contribs/gmf/examples/search.js
+++ b/contribs/gmf/examples/search.js
@@ -20,9 +20,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';
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..2fbfb2625abf 100644
--- a/contribs/gmf/examples/themeselector.js
+++ b/contribs/gmf/examples/themeselector.js
@@ -20,8 +20,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';
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.js b/contribs/gmf/examples/timeslider.js
index 391fdb6c7ae0..8c1a5aa9bc71 100644
--- a/contribs/gmf/examples/timeslider.js
+++ b/contribs/gmf/examples/timeslider.js
@@ -20,9 +20,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';
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..cebbc0c2c8f4 100644
--- a/contribs/gmf/examples/xsdattributes.js
+++ b/contribs/gmf/examples/xsdattributes.js
@@ -20,8 +20,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';
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..93f062aee5ef 100644
--- a/examples/animation.js
+++ b/examples/animation.js
@@ -20,8 +20,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';
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/backgroundlayer.js b/examples/backgroundlayer.js
index b718bbb46f8a..38bf4f5f3d01 100644
--- a/examples/backgroundlayer.js
+++ b/examples/backgroundlayer.js
@@ -21,8 +21,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';
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..ed8e822b9b0b 100644
--- a/examples/backgroundlayerdropdown.js
+++ b/examples/backgroundlayerdropdown.js
@@ -21,8 +21,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';
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..f995c7bcad4c 100644
--- a/examples/colorpicker.js
+++ b/examples/colorpicker.js
@@ -20,8 +20,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';
diff --git a/examples/colorpicker.css b/examples/colorpicker.scss
similarity index 97%
rename from examples/colorpicker.css
rename to examples/colorpicker.scss
index 1eb76316d5bb..5dbd06fe2bfb 100644
--- a/examples/colorpicker.css
+++ b/examples/colorpicker.scss
@@ -1,3 +1,5 @@
+@import './common_styles.scss';
+
 body {
   padding: 10px;
 }
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..5a17adfcecb1 100644
--- a/examples/createfeature.js
+++ b/examples/createfeature.js
@@ -20,8 +20,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';
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.js b/examples/datepicker.js
index 4f56bae40b34..c0341c87c1df 100644
--- a/examples/datepicker.js
+++ b/examples/datepicker.js
@@ -20,8 +20,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';
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..580a5c128ee1 100644
--- a/examples/disclaimer.js
+++ b/examples/disclaimer.js
@@ -20,8 +20,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';
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..4515003ac173 100644
--- a/examples/displaywindow.js
+++ b/examples/displaywindow.js
@@ -20,8 +20,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';
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..2e8493243bc6 100644
--- a/examples/drawfeature.js
+++ b/examples/drawfeature.js
@@ -20,8 +20,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';
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..3e5fdf9698b5 100644
--- a/examples/elevationProfile.js
+++ b/examples/elevationProfile.js
@@ -20,8 +20,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';
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..ca7ce08f2cb6 100644
--- a/examples/googlestreetview.js
+++ b/examples/googlestreetview.js
@@ -20,8 +20,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';
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/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..db57295dc2be 100644
--- a/examples/layerorder.js
+++ b/examples/layerorder.js
@@ -20,8 +20,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';
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..1d395ec1d6bd 100644
--- a/examples/locationsearch.js
+++ b/examples/locationsearch.js
@@ -20,9 +20,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';
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/mapillarystreetview.js b/examples/mapillarystreetview.js
index 5b3513d7f337..21dcd3a06b07 100644
--- a/examples/mapillarystreetview.js
+++ b/examples/mapillarystreetview.js
@@ -20,9 +20,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';
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.js b/examples/measure.js
index 6476a40aa191..d9bc3ea48ce9 100644
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -20,8 +20,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';
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..1f689045bd01 100644
--- a/examples/mobilegeolocation.js
+++ b/examples/mobilegeolocation.js
@@ -20,8 +20,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';
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..3932e0bbebc3 100644
--- a/examples/permalink.js
+++ b/examples/permalink.js
@@ -21,11 +21,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';
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..1486a743c19a 100644
--- a/examples/popupservice.js
+++ b/examples/popupservice.js
@@ -20,8 +20,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';
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..8dc694c3c9af 100644
--- a/examples/query.js
+++ b/examples/query.js
@@ -21,12 +21,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';
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..bfd8f5749761 100644
--- a/examples/scaleselector.js
+++ b/examples/scaleselector.js
@@ -20,8 +20,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';
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..3c5b05209e93 100644
--- a/examples/search.js
+++ b/examples/search.js
@@ -20,9 +20,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';
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;