Primeflex variables $lg

Question

in Primeflex docs, variable $lg (Breakpoint of screens such as notebook monitors) has a default value of 992px. How can I change that? For example, I want to set a default value of 1100px. Please assist I'm using Primeflex 3.0.1

Answer 1

This is explained in https://www.primefaces.org/primeflex/setup

Variables

SASS variables are available to customize and create your own primeflex build. To begin with clone the primeflex repo and then build the primeflex.scss file after your customizations. Refer to Sass documentation for more information about how to build scss files.

What is not super clear from that section is where to find the variables. You'll need to modify this file:

https://github.com/primefaces/primeflex/blob/master/_sass/lib/src/_variables.scss

Answer 2

You might not want to modify anything because if it gets updated your modifications will be gone. Use an override to accomplish this. Add the following to your .scss

$lg:992px !important;

Answer 3

these steps solved my problem, thank you :)

1. Clone project from https://github.com/primefaces/primeflex
2. Change the values of variables on path _sass/lib/src/_variables.scss
3. Install sass globally with command npm install -g sass
4. Open the project
5. Run npm install to install packages
6. Run npm run build-lib which will create new dist folder
7. Copy dist folder into the ongoing project
8. Remove "primeflex": "3.0.1" from package.json file
9. Add path for using imported primeflex.css in angular.json file ("styles": [ "/primeflex/primeflex.min.css" ])