Error when loading flex from theme

Post Reply
dscoil
Posts: 3
Joined: 02 Sep 2020, 16:40

16 Mar 2022, 14:40

In the latest version I downloaded (v13) of the theme designer it uses primeflex version 2.
I updated it to v3:

Code: Select all

"primeflex": "^3.1.3",
I also wanted to load the primeflex via the theme and not the from the angular.json.
Here is my theme.scss

Code: Select all

@import './variables';
@import './_fonts';
@import '../../designer/_components';
@import '~primeflex/primeflex.scss';
@import './_extensions';
when running (in code configuration) I get the following error:

Code: Select all

 Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
	.text-blue #2196F3{
  node_modules/primeflex/src/_mixins.scss 27:21  color-class()
  node_modules/primeflex/src/_colors.scss 11:1   @import
  node_modules/primeflex/primeflex.scss 4:9      @import
  src/sass/themes/mytheme/theme.scss 4:9         root stylesheet
Any Ideas ?

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

14 Apr 2022, 09:33

Hi,

Sorry for the delayed response! Could you please try it with the latest Designer version?

Best Regards,

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

14 Apr 2022, 09:50

dscoil wrote:
16 Mar 2022, 14:40
In the latest version I downloaded (v13) of the theme designer it uses primeflex version 2.
I updated it to v3:

Code: Select all

"primeflex": "^3.1.3",
I also wanted to load the primeflex via the theme and not the from the angular.json.
Here is my theme.scss

Code: Select all

@import './variables';
@import './_fonts';
@import '../../designer/_components';
@import '~primeflex/primeflex.scss';
@import './_extensions';
when running (in code configuration) I get the following error:

Code: Select all

 Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
	.text-blue #2196F3{
  node_modules/primeflex/src/_mixins.scss 27:21  color-class()
  node_modules/primeflex/src/_colors.scss 11:1   @import
  node_modules/primeflex/primeflex.scss 4:9      @import
  src/sass/themes/mytheme/theme.scss 4:9         root stylesheet
Any Ideas ?
Hi,

We updated primeflex to v3 in Designer-NG v13.1.1. You can download Designer-NG 13.1.1 from Prime Store.

Lastly, please use this path for import:

Code: Select all

...
@import 'primeflex/primeflex.scss';
...
Best Regards.

Nargzul
Posts: 15
Joined: 21 Apr 2017, 14:30

21 Apr 2022, 10:44

Hi,

I've the same exact error when trying to use PrimeFlex in a non PrimeNg angular

I just added in my style.scss:

Code: Select all

@import "primeflex/primeflex.scss";
And just before this, I also import a file with all the expected variables:

Code: Select all

//Those are colors for PrimeFlex
$text-color: #495057;
$text-color-secondary: #6c757d;
$primary-color: $primary;
$primary-color-text: #000000;
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
  Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
$surface-0: #ffffff;
$surface-50: #fafafa;
$surface-100: #f5f5f5;
$surface-200: #eeeeee;
$surface-300: #e0e0e0;
$surface-400: #bdbdbd;
$surface-500: #9e9e9e;
$surface-600: #757575;
$surface-700: #616161;
$surface-800: #424242;
$surface-900: #212121;
$surface-ground: #f8f9fa;
$surface-section: #ffffff;
$surface-card: #ffffff;
$surface-overlay: #ffffff;
$surface-border: #dee2e6;
$content-padding: 1rem;
$inline-spacing: 0.5rem;
$blue-50: #f4fafe;
$blue-100: #cae6fc;
$blue-200: #a0d2fa;
$blue-300: #75bef8;
$blue-400: #4baaf5;
$blue-500: #2196f3;
$blue-600: #1c80cf;
$blue-700: #1769aa;
$blue-800: #125386;
$blue-900: #0d3c61;
$green-50: #f6fbf6;
$green-100: #d4ecd5;
$green-200: #b2ddb4;
$green-300: #90cd93;
$green-400: #6ebe71;
$green-500: #4caf50;
$green-600: #419544;
$green-700: #357b38;
$green-800: #2a602c;
$green-900: #1e4620;
$yellow-50: #fffcf5;
$yellow-100: #fef0cd;
$yellow-200: #fde4a5;
$yellow-300: #fdd87d;
$yellow-400: #fccc55;
$yellow-500: #fbc02d;
$yellow-600: #d5a326;
$yellow-700: #b08620;
$yellow-800: #8a6a19;
$yellow-900: #644d12;
$cyan-50: #f2fcfd;
$cyan-100: #c2eff5;
$cyan-200: #91e2ed;
$cyan-300: #61d5e4;
$cyan-400: #30c9dc;
$cyan-500: #00bcd4;
$cyan-600: #00a0b4;
$cyan-700: #008494;
$cyan-800: #006775;
$cyan-900: #004b55;
$pink-50: #fef4f7;
$pink-100: #fac9da;
$pink-200: #f69ebc;
$pink-300: #f1749e;
$pink-400: #ed4981;
$pink-500: #e91e63;
$pink-600: #c61a54;
$pink-700: #a31545;
$pink-800: #801136;
$pink-900: #5d0c28;
$indigo-50: #f5f6fb;
$indigo-100: #d1d5ed;
$indigo-200: #acb4df;
$indigo-300: #8893d1;
$indigo-400: #6372c3;
$indigo-500: #3f51b5;
$indigo-600: #36459a;
$indigo-700: #2c397f;
$indigo-800: #232d64;
$indigo-900: #192048;
$teal-50: #f2faf9;
$teal-100: #c2e6e2;
$teal-200: #91d2cc;
$teal-300: #61beb5;
$teal-400: #30aa9f;
$teal-500: #009688;
$teal-600: #008074;
$teal-700: #00695f;
$teal-800: #00534b;
$teal-900: #003c36;
$orange-50: #fff8f2;
$orange-100: #fde0c2;
$orange-200: #fbc791;
$orange-300: #f9ae61;
$orange-400: #f79530;
$orange-500: #f57c00;
$orange-600: #d06900;
$orange-700: #ac5700;
$orange-800: #874400;
$orange-900: #623200;
$bluegray-50: #f7f9f9;
$bluegray-100: #d9e0e3;
$bluegray-200: #bbc7cd;
$bluegray-300: #9caeb7;
$bluegray-400: #7e96a1;
$bluegray-500: #607d8b;
$bluegray-600: #526a76;
$bluegray-700: #435861;
$bluegray-800: #35454c;
$bluegray-900: #263238;
$purple-50: #faf4fb;
$purple-100: #e7cbec;
$purple-200: #d4a2dd;
$purple-300: #c279ce;
$purple-400: #af50bf;
$purple-500: #9c27b0;
$purple-600: #852196;
$purple-700: #6d1b7b;
$purple-800: #561561;
$purple-900: #3e1046;
$gray-50: #fafafa;
$gray-100: #f5f5f5;
$gray-200: #eeeeee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #424242;
$gray-900: #212121;
but when I serve the file, I get the same error:

Code: Select all

Compiled with problems:X

ERROR in ./src/styles.scss (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.

 .text-blue #0d6efd{

  node_modules\primeflex\src\_mixins.scss 27:21  color-class()


Did you find a solution?

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

08 Jul 2022, 10:17

Hi,

Fixed for the latest primeflex version. Could you please try it?

Best Regards,

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest