I am attempting to incorporate a dark theme into ngx-charts, and I'm relatively new to using less. Here is the code snippet:
My IDE is showing an error message "Cannot find variable 'color-bg-darker'" which leads to compilation failure.
Error: ./src/styles.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
*/
$color-bg-darkest: #13141b;
^
Unrecognised input
Error in C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\src\styles.less (line 397, column 2)
at C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\node_modules\webpack\lib\NormalModule.js:316:20
at C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.lessLoader (C:\Users\KOTIENO1\Desktop\Projects\GariambaInvoicing\angular-invoicing-frontend\node_modules\less-loader\dist\index.js:57:5)
The section of my styles.less file that triggers this issue is as follows:
.dark {
/**
* Backgrounds
*/
$color-bg-darkest: #13141b;
$color-bg-darker: #1b1e27;
$color-bg-dark: #232837;
$color-bg-med: #2f3646;
$color-bg-light: #455066;
$color-bg-lighter: #5b6882;
/**
* Text
*/
$color-text-dark: #72809b;
$color-text-med-dark: #919db5;
$color-text-med: #A0AABE;
$color-text-med-light: #d9dce1;
$color-text-light: #f0f1f6;
$color-text-lighter: #fff;
background: $color-bg-darker;
.ngx-charts {
text {
fill: $color-text-med;
}
.tooltip-anchor {
fill: rgb(255, 255, 255);
}
/* More CSS classes and properties... */
}
}