feat: copy style for new project | have error

assets/styles/base/_override.scss

@@ -1,6 +1,3 @@
-// Import Bulma's core
-@import "~bulma/sass/utilities/_all";
-
 $eHandyPrimaryColor: #0091ea;
 $eHandyPrimaryColor-invert: #fff;
 
@@ -29,13 +26,3 @@ $addColors: (
   "primary": ($primary, $primary-invert)
 );
 $colors: map-merge($colors, $addColors);
-
-// Import Bulma and Buefy styles
-@import "~bulma";
-@import "~buefy/src/scss/buefy";
-
-*,
-html,
-body {
-  font-family: 'Montserrat', sans-serif !important;
-}

assets/styles/base/_typography.scss

@@ -0,0 +1,5 @@
+*,
+html,
+body {
+  font-family: 'Montserrat', sans-serif !important;
+}

assets/styles/main.scss

@@ -0,0 +1,11 @@
+// Bat buoc
+@import "~bulma/sass/utilities/_all";
+// Base
+@import './base/override';
+@import './base/typography';
+// Utils
+@import './utils/utils-dir';
+
+// Bat buoc
+@import "~bulma";
+@import "~buefy/src/scss/buefy";

assets/styles/utils/_utils-dir.scss

@@ -0,0 +1,7 @@
+@import './mixins/prefix';
+@import './mixins/center';
+@import './mixins/position';
+@import './mixins/responsive';
+@import './mixins/size';
+@import './functions/get-variable-css';
+@import './mixins/three-dots';

assets/styles/utils/functions/_get-variable-css.scss

@@ -0,0 +1,43 @@
+/// Get color variable from css to scss
+/// @param $color-props: color variable : --color-text-rgb, --color-body-text
+///
+@function color($color-props) {
+  @return var(--color-#{$color-props});
+}
+
+/// Get font variable from css to scss
+/// @param $font-props: font variable : --font-size-header, --font-size-base
+///
+@function font($font-props) {
+  @return var(--font-#{$font-props});
+}
+
+/// Get all general variable from css to scss
+@function v($props) {
+  @return var(--#{$props});
+}
+
+/// Example :
+// :root {
+//   --color-background: #FFFFFF;
+// }
+
+// body {
+//   color: color(primary);
+// }
+
+// compiled sass code is:
+
+// body {
+//   color: var(--color-primary);
+// }
+
+// .kmacoders {
+//   color: v(--color-background);
+// }
+
+//  compiled sass code is:
+
+// .kmacoders {
+// 	color: var(----color-background);
+// }

assets/styles/utils/mixins/_center.scss

@@ -0,0 +1,21 @@
+/* Self center vertical */
+@mixin vertical-align-center {
+  position: relative;
+  top: 50%;
+  @include prefix(transform, translateY(-50%));
+}
+
+/* Self center horizontal */
+@mixin horizontal-align-center {
+  position: relative;
+  left: 50%;
+  @include prefix(transform, translateX(-50%));
+}
+
+/* Self center both direction */
+@mixin both-align-center {
+  position: relative;
+  left: 50%;
+  top: 50%;
+  @include prefix(transform, translate(-50%, -50%));
+}

assets/styles/utils/mixins/_position.scss

@@ -0,0 +1,33 @@
+/*
+* Add position property
+*
+* @param {String} $position - relative | absolute | fixed
+* @param {Length} $args - List direction property and value
+*
+* @example
+* - Usage:
+* .foo {
+*    @include position(relative, top 0 left 1em);
+* }
+* - Output:
+* .foo {
+     position: relative;
+     top: 0;
+     left: 1em;
+* }
+* ...or other way :
+* .foo {
+*    @include position(relative, '');
+* }
+*/
+@mixin position($position, $args) {
+  @each $o in top right bottom left {
+      $i: index($args, $o);
+
+      @if $i and $i + 1<= length($args) and type-of(nth($args, $i + 1)) == number {
+          #{$o}: nth($args, $i + 1);
+      }
+  }
+
+  position: $position;
+}

assets/styles/utils/mixins/_prefix.scss

@@ -0,0 +1,58 @@
+/* VERSION 1 ***********************************************/
+/*
+* Add prefix for property css
+*
+* @param $name : name of property
+* @param $value : value of property
+*
+* @example
+* - Usage:
+* .foo {
+*    @inlucde prefix(transform, translateY(-50%));
+* }
+*/
+@mixin prefix($name, $value) {
+  -webkit-#{$name}: $value;
+  -moz-#{$name}: $value;
+  -ms-#{$name}: $value;
+  -o-#{$name}: $value;
+  #{$name}: $value;
+}
+
+/* VERSION 2 : Avanced version ****************************************/
+/*
+* Mixin to prefix several properties at once
+*
+* @param {List} $prefixes (()) - List of prefixes to print
+* @example
+* - Usage:
+* .foo {
+*   @include prefix((
+*     column-count: 3,
+*     column-gap: 1.5em,
+*     column-rule: 2px solid hotpink
+*   ), webkit moz);
+* }
+* - Output:
+* .foo {
+*   -webkit-column-count: 3;
+*   -moz-column-count: 3;
+*   column-count: 3;
+*   -webkit-column-gap: 1.5em;
+*   -moz-column-gap: 1.5em;
+*   column-gap: 1.5em;
+*   -webkit-column-rule: 2px solid hotpink;
+*   -moz-column-rule: 2px solid hotpink;
+*   column-rule: 2px solid hotpink;
+*}
+*/
+@mixin prefixServeral($declarations, $prefixes: ()) {
+  @each $property, $value in $declarations {
+      @each $prefix in $prefixes {
+          #{'-' + $prefix + '-' + $property}: $value;
+      }
+
+      // Output standard non-prefixed declaration
+      #{$property}: $value;
+  }
+}

assets/styles/utils/mixins/_responsive.scss

@@ -0,0 +1,40 @@
+/* Screen size ( Size này cùng với Theme Config global cho JS) */
+$SM: 576px;
+$MD: 768px;
+$LG: 992px;
+$XL: 1200px;
+
+/*
+* Responsive element follow by screen size
+*
+* @param $screen-size: screen size
+*
+* @example
+* .foo {
+*   font-size: 10px;
+*   @include responsive(MD) {
+*       font-size : 12px;
+*   }
+*   @include responsive(XL) {
+*       font-size : 14px;
+*   }
+*/
+@mixin responsive($screen-size) {
+    @if $screen-size == SM {
+        @media only screen and (min-width: $SM) {
+            @content;
+        }
+    } @else if $screen-size == MD {
+        @media only screen and (min-width: $MD) {
+            @content;
+        }
+    } @else if $screen-size == LG {
+        @media only screen and (min-width: $LG) {
+            @content;
+        }
+    } @else if $screen-size == XL {
+        @media only screen and (min-width: $XL) {
+            @content;
+        }
+    }
+}

assets/styles/utils/mixins/_size.scss

@@ -0,0 +1,16 @@
+
+/*
+* Set size for a element
+*
+* @param $width: width property
+* @param $height: height property
+*
+* @example
+* .foo {
+*    @include box(10px, 5px);
+* }
+*/
+@mixin box($width, $height) {
+  height: $height;
+  width: $width;
+}

assets/styles/utils/mixins/_three-dots.scss

@@ -0,0 +1,21 @@
+/*
+* Set size for a element
+*
+* @param $width: width property
+* @param $line: line property
+*
+* @example
+* .foo {
+*    @include three-dots(200px, 3);
+* }
+*/
+
+@mixin three-dots($width, $line) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $line;
+
+  width: $width;
+}

commitlint.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional']
+  extends: ['@commitlint/config-conventional'],
+  ignoreFiles: [
+    './assets/styles/**/*.scss'
+  ]
 }

nuxt.config.js

@@ -21,7 +21,7 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-    '~assets/style/main.scss'
+    '~assets/styles/main.scss'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
@@ -49,8 +49,12 @@ export default {
     // https://go.nuxtjs.dev/pwa
     '@nuxtjs/pwa',
     // https://go.nuxtjs.dev/content
-    '@nuxt/content'
+    '@nuxt/content',
+    '@nuxtjs/style-resources'
   ],
+  styleResources: {
+    scss: ['~assets/styles/utils/_utils-dir.scss']
+  },
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {},

package.json

@@ -33,6 +33,7 @@
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config-typescript": "^6.0.1",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/style-resources": "^1.2.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@vue/test-utils": "^1.1.3",
     "babel-core": "7.0.0-bridge.0",
@@ -45,6 +46,7 @@
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
+    "node-sass": "^6.0.1",
     "sass": "~1.32.6",
     "sass-loader": "^10.2.0",
     "stylelint": "^13.12.0",