scss

frontend/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-sass-guidelines"
+}

frontend/package.json

@@ -77,6 +77,9 @@
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "~5.0",
     "sass-loader": "^8.0.2",
+    "stylelint": "^13.2.1",
+    "stylelint-config-sass-guidelines": "^7.0.0",
+    "stylelint-config-standard": "^20.0.0",
     "uglifyjs-webpack-plugin": "~1.2",
     "vue-loader": "~15.6",
     "vue-style-loader": "~4.1",

frontend/src/assets/scss/base.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 HTML,BODY {
     background-color: $background-color;
 }
@@ -691,5 +693,3 @@ HTML,BODY {
     transform: translateX(10px);
     opacity: 0;
   }
-
-@import 'mobile';

frontend/src/assets/scss/main.scss

@@ -1,3 +1,2 @@
-@import 'variables';
 @import 'base';
-@import 'mobile';
+@import 'mobile';

frontend/src/assets/scss/mobile.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 @media (max-width: 767px) {
 
     HTML,BODY {