Vue-essential-slices build error

Developing with Prismic
1

When building my project in production mode i get the error described in:

I have followed @lihbr advice below with no luck

"I'd suggest updating dependencies ( nuxt , @nuxtjs/tailwindcss especially, except sass-loader ) and removing postcss , then giving it another go"

Here is the full error message...

ERROR in ./node_modules/vue-essential-slices/src/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-essential-slices/src/styles/styles.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-custom-properties: <css input> Unknown word

> 1 | var(--scale--small)*1*var(--scale--small)*var(--scale--small)*var(--scale--small)*var(--scale--small)
    | ^

 @ ./node_modules/vue-essential-slices/src/styles/styles.scss 4:14-195
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

ERROR in ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-custom-properties: <css input> Unknown word

> 1 | var(--scale--small)*1*var(--scale--small)*var(--scale--small)*var(--scale--small)*var(--scale--small)
    | ^

 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&) 4:14-424
 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&
 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue
 @ ./node_modules/vue-essential-slices/src/slices lazy ^\.\/.*\/index\.vue$ namespace object
 @ ./.nuxt/prismic/sm-resolver.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

 FATAL  Nuxt build error                                                                              12:47:51

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)

Any suggestions on what to try next...?

2

The workaround is to add the following in nuxt.config.js...

build: {
	postcss: {
		plugins: {
			'postcss-custom-properties': false
		}
	}
}
4

Hi Thomas,

Sorry we didn't get back sooner. It seems the latest updates with node has been causing some issues with post CSS, I've seen it in a couple of sample projects as well. It's in my backlog to tackle.

Thanks for pointing this out.

1 Like
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.