slider

slider copied to clipboard

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

nuxt dev works perfectly though. What could be wrong?

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

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.

Feel free to reopen if still relevant.

This issue might be related to https://github.com/postcss/postcss-calc/issues/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);