fieldMargin error when using node-sass and scss overides

UI Components for React
Post Reply
JamesWilk
Posts: 2
Joined: 15 Oct 2020, 14:54

15 Oct 2020, 14:58

I am just installing Prime React to evaluate it for wheter or not it will work for us but i am running into an error right out of the gate.

I installed React with Create React App --typescript
Converted to using SCSS by installing node sass and changing the files
Made an overides.css and put in all the information from _variables.scss
I run and get this compile error despite field margin being deefined in both variables.scss and my overrides file

./node_modules/primeflex/src/_formlayout.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/primeflex/src/_formlayout.scss)
SassError: Undefined variable: "$fieldMargin".
on line 2 of /Users/jameswilkinson/Sites/prime-demo/node_modules/primeflex/src/_formlayout.scss
>> margin-bottom: $fieldMargin;

App.tsx

//Styles
import './_overides.scss'
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_display.scss';
import 'primeflex/src/_text.scss';
import 'primeflex/src/flexbox/_flexbox.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_elevation.scss';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import './App.scss';

Additionally the documentation is very sparse on getting an application up and running, I installed all the files etc and have an ugly app

itsme
Posts: 3
Joined: 02 Oct 2017, 11:31

20 Oct 2020, 13:51

Same problem, only difference is I am using Angular. Will not compile.

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

21 Oct 2020, 08:14

Hi,

You can use App.scss for this. Please try;
App.scss

Code: Select all

$gutter: 1rem; /* sample variable */
/* Your variables, maybe import './_overides.scss' */

@import 'node_modules/primeflex/primeflex.scss';

Code: Select all

...
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import './App.scss';

...
Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest