[VUE 2] Grid css works for dev but on prod build css file break the process

[dev_man_44]

I use npm way of grid component. I have imported the css file into my tailwind.css file as below:

@import "@bryntum/grid/grid.stockholm.css";

But it throw error when I want to build the app for production:

[sergey.maltsev]

Hi!

Seems some css code is not compatible with the @nuxt css loader
You may see which symbol is at line 1, column 32 in css file.
Could you please check if upgrading @nuxt or it's css loader may help you?

If you won't be able to resolve please attach some application we can build and see this error.

[dev_man_44]

.b-fa-li {
  left: calc(var(--b-fa-li-width, 2em) * -1);
  position: absolute;
  text-align: center;
  width: var(--b-fa-li-width, 2em);
  line-height: inherit;
}

This is the code throws error

[sergey.maltsev]

According to these docs it is correct CSS declaration
https://developer.mozilla.org/en-US/docs/Web/CSS/var()#syntax

You may set value for --b-fa-li-width if you want to override default value.

[dev_man_44]

Is there any scss decleration for npm module? I can not find one. So I guess to override I should use html root variables.

I have imported .min css file directly without postcss processing and eveything works correctly.

[sergey.maltsev]

Hi!

Sass files available for licensed version of Grid component. Trial version doesn't have it.

To solve issues with css you may try to define variables in you application's css file or include css resources to HTML head tag (https://nuxtjs.org/docs/components-glossary/head/)

[dev_man_44]

I have already license for Grid component. I used it by npm way with login to your repository. But there is no scss files exist in it.

I have already edited nuxt head way and it works. But can not figure out why importing and build breaks the process.

[sergey.maltsev]

Hi!

npm packages don't contain source files.
You may download full sources from Customer Zone.
https://customerzone.bryntum.com/