Giters

vueform / slider

Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).

Home Page:https://vueform.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build CSS/SCSS error

gen4sp opened this issue · comments

commented

Trying to build a project on NUXT 2, but got an error.
I've tried importing both CSS and SCSS to my main SCSS file and to the nuxt config.
Nothing works.

Without explicit importing style - the slider looks incorrect (almost invisible)


ERROR in ./node_modules/@vueform/slider/themes/default.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@vueform/slider/themes/default.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 41
    at /Users/gen4/Gits/BigDay/STD-visual/node_modules/@vueform/slider/themes/default.css:1:1536
    at Parser.error (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:194:18
    at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:135:17)
    at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./node_modules/@vueform/slider/themes/default.css 4:14-145
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
commented

nuxt dev works perfectly though.
What could be wrong?

commented

Got the same issue on Nuxt 2. worked on yarn dev but not on build

commented

I just copied all the CSS, and replaced the "var(-- ...)" with their default values. Didn't have time to firgure out a more sophisticated fix.

commented

Feel free to reopen if still relevant.

commented

This issue might be related to postcss/postcss-calc#142 .

I copied default.scss and replaced from

  right: calc(var(--slider-handle-width, 16px) / 2 * (-1));

to

  right: calc(-1 * var(--slider-handle-width, 16px) / 2);