wtho / bulma-css-vars Goto Github PK

(node:10019) UnhandledPromiseRejectionWarning: Error: Can't find stylesheet to import.
  ╷
4 │ @import "../bulma/sass/utilities/derived-variables.sass"
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/bulma-css-vars/bulma-cv-utilities.sass 4:9  @import
  node_modules/bulma-css-vars/bulma-cv-lib.sass 3:9        @import
  src/main.scss 3:9                                        root stylesheet

in ./node_modules/bulma-css-vars/node_modules/color/index.js                  friendly-errors 15:54:32

Module parse failed: Identifier directly after number (257:26)                        friendly-errors 15:54:32
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|               for (const [i, element] of rgb.entries()) {
|                       const chan = element / 255;
>                       lum[i] = (chan <= 0.039_28) ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
|               }
| 
                                                                                      friendly-errors 15:54:32
 @ ./node_modules/bulma-css-vars/dist/bulma-color-tools.js 4:14-30
 @ ./node_modules/bulma-css-vars/dist/index.js
 @ ./node_modules/esbuild-loader/dist??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./components/layout/Navbar.vue?vue&type=script&lang=ts&
 @ ./components/layout/Navbar.vue?vue&type=script&lang=ts&
 @ ./components/layout/Navbar.vue
 @ ./.nuxt/components/index.js
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/color-mode/script.js ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Executing task: npm run update-bulma-colors <

 [email protected] update-bulma-colors C:\Code\StyleTest\test-styles
bulma-css-vars

(node:17312) UnhandledPromiseRejectionWarning: Error: Only 2 arguments allowed, but 4 were passed.
   ┌──> node_modules\buefy\src\scss\components\_carousel.scss
133│         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   │                                  ^^^^^^^^^^^^^^^^^^^ invocation
   ╵
   ┌──> node_modules\bulma-css-vars\functions.sass
51 │ @function rgba($col, $alpha)
   │           ━━━━━━━━━━━━━━━━━━ declaration
   ╵
  node_modules\buefy\src\scss\components\_carousel.scss 133:34  rgba()
  node_modules\buefy\src\scss\components\_carousel.scss 133:34  @import
  node_modules\buefy\src\scss\buefy.scss 4:9                    @import
  src\styles\_main.scss 88:9                                    root stylesheet
    at Object._newRenderError (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:13472:19)
    at Object._wrapException (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:13315:16)
    at StaticClosure._renderSync (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:13290:18)
    at Object.Primitives_applyFunction (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:1085:30)
    at Object.Function_apply (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:6003:16)
    at _callDartFunctionFast (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:7672:16)
    at Object.renderSync (C:\Code\StyleTest\test-styles\node_modules\sass\sass.dart.js:7650:18)
    at Object.renderSass (C:\Code\StyleTest\test-styles\node_modules\bulma-css-vars\dist\render-sass.js:7:27)
    at C:\Code\StyleTest\test-styles\node_modules\bulma-css-vars\dist\cli.js:90:43
    at Generator.next (<anonymous>)
(node:17312) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:17312) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

`const { hsl } = require('bulma-css-vars')

// color names have to match bulma's $variable-name, without '$'
// values will be used for initial colors and fallback
const appColors = {
  primary: hsl(161, 49, 58),
  secondary: hsl(355, 52, 48),
  tertiary: hsl(32, 100, 93),
}
// reuse variable colors
appColors['text'] = appColors['primary']

module.exports = {
  sassEntryFile: './src/styles/_main.scss',
  jsOutputFile: './src/bulma-generated/bulma-colors.js',
  sassOutputFile: './src/bulma-generated/generated-vars.sass',
  cssFallbackOutputFile: './src/bulma-generated/generated-fallbacks.css',
  colorDefs: appColors,
  globalWebVar: false,
  transition: '0.5s ease',
}`

`// import fallbacks first, so they are overridden
@import '../bulma-generated/generated-fallback.css'; 
@import '../bulma-generated/generated-vars.sass';
@import 'node_modules/bulma-css-vars/bulma-cv-lib';

// Import Bulma's core
@import "node_modules/bulma/sass/utilities/_all";

// I intend to customise Buefy/Bulma here

// Import Bulma and Buefy styles
@import "node_modules/bulma/bulma";
@import "node_modules/buefy/src/scss/buefy";`

Uncaught TypeError: Color is not a function
    at stringToHsl (bulma-color-tools.js:90:30)
    at ColorUpdater.getUpdatedVars (color-updater.js:24:23)
    at ColorUpdater.updateVarsInDocument (color-updater.js:33:31)
    at setPrimaryColor (ColorPalette.vue:13:16)
    at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:21)
    at HTMLInputElement.invoker (runtime-dom.esm-bundler.js:345:9)

typeof Color: "object"
Color: Function
col: "#520f0f"
Color(col): <not available>
Color.default(col): Color2
Color.prototype(col): <not available>
Color('rgb(123,123,123)'): <not available>
Color({r:123, g:123, b:123}): <not available>
new Color(col): <not available>
Color.call(col): <not available>

D:\c#\c#projects\test2>node ./node_modules/.bin/bulma-css-vars --init
D:\c#\c#projects\test2\node_modules\.bin\bulma-css-vars:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
←[90m    at wrapSafe (internal/modules/cjs/loader.js:979:16)←[39m
←[90m    at Module._compile (internal/modules/cjs/loader.js:1027:27)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:928:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)←[39m
←[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)←[39m
←[90m    at internal/main/run_main_module.js:17:47←[39m

{
  "name": "topas4analyticsweb",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "css-build": "sass src/main.csss src/assets/css/main.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
  },
  "dependencies": {
    "@adapttive/vue-markdown": "^4.0.1",
    "@diracleo/vue-enlargeable-image": "0.0.7",
    "buefy": "^0.9.8",
    "bulma": "^0.9.3",
    "bulma-css-vars": "^0.6.1",
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "markdown-it-vue": "^1.1.6",
    "plotly.js": "^2.2.1",
    "vue": "^2.6.11",
    "vue-clipboard2": "^0.3.1",
    "vue-luxon": "^0.10.0",
    "vue-router": "^3.2.0",
    "vue-select": "^3.11.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.35.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/strongly-recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-mixed-spaces-and-tabs": "off",
      "vue/require-v-for-key": "off",
      "no-unused-vars": [
        "error",
        {
          "args": "none"
        }
      ]
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}