fix build

.gitignore

@@ -1,12 +1,11 @@
 .DS_Store
 node_modules
+docs
 
 # local env files
 .env.local
 .env.*.local
 
-/dist
-
 /src/system/tokens/generated
 /src/system/icons/generated
 

package.json

@@ -4,7 +4,7 @@
   "private": false,
   "scripts": {
     "serve": "http-server ./docs -o -s",
-    "build": "yarn theo && vue-cli-service build --no-fix",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn theo && vue-cli-service build --no-fix",
     "lint": "vue-cli-service lint --no-fix-warning",
     "dev": "npm-run-all --parallel theo:onchange theo servedev",
     "servedev": "vue-cli-service serve --open --no-fix",
@@ -53,12 +53,12 @@
     "markdown-it-sub": "~1.0.0",
     "markdown-it-sup": "~1.0.0",
     "markdown-it-task-lists": "~2.1.1",
-    "node-sass": "^9.0.0",
     "npm-run-all": "~4.1.5",
     "onchange": "~6.0.0",
     "portal-vue": "~2.1.6",
     "raw-loader": "~3.1.0",
-    "sass-loader": "~8.0.0",
+    "sass": "1.77.6",
+    "sass-loader": "~10.1.1",
     "theo": "~8.1.4",
     "vue-click-outside": "~1.0.7",
     "vue-docgen-api": "^3.22.0",

src/system/tokens/media-query.yml

@@ -33,15 +33,15 @@ props:
     category: media-size
 
   - name: media-query-x-small
-    value: "(min-width: {!xs}px)"
+    value: "'(min-width: {!xs}px)'"
   - name: media-query-small
-    value: "(min-width: {!sm}px)"
+    value: "'(min-width: {!sm}px)'"
   - name: media-query-medium
-    value: "(min-width: {!md}px)"
+    value: "'(min-width: {!md}px)'"
   - name: media-query-large
-    value: "(min-width: {!lg}px)"
+    value: "'(min-width: {!lg}px)'"
   - name: media-query-x-large
-    value: "(min-width: {!xl}px)"
+    value: "'(min-width: {!xl}px)'"
 global:
   type: ...
   category: media-query

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        prependData: '@import "@@/styles/shared.scss";'
+        additionalData: '@import "@@/styles/shared.scss";'
       }
     }
   },