recently I upgraded my angular app from bootstrap 4.5 to 5.1.1 by editing package.json file.
"dependencies": {
"bootstrap": "5.1.1"...
I faced below issue after upgrading.
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
7 │ ┌ #include hover {
8 │ │ color: $color;
9 │ │ background-color: $focus-background;
10 │ │ border-color: $focus-border;
11 │ └ }
Any idea?
Issue was hover hover-focus hover-focus-active mixins deprecated in bootstrap 4 and remove in bootstrap 5. So if you are using those need to initialize the start of the file you are using them.
https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/mixins/_hover.scss
#mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
#content;
}
}
#mixin bmd-hover-focus-active {
// add the .active to the whole mix of hover-focus-active
&.active {
#content;
}
#include hover-focus-active() {
#content;
}
}
like that define the all mixins
Related
angular material 15 looking for #include theme.validate-theme-styles($light-theme, $theme); however, validate-theme-styles is indeed not defined.
I just updated angular and angular material to 15, the custom theme is now throwing build errors. it worked fine with version 14.
./src/lawyer.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
54 │ #include theme.validate-theme-styles($light-theme, $theme);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
#material\linear-progress\_linear-progress-theme.scss 54:3 theme-styles()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 14:3 -palette-styles()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 35:7 #content
node_modules\#angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5 #content
node_modules\#angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3 disable-mdc-fallback-declarations()
node_modules\#angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3 using-mdc-theme()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 33:3 color()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 60:7 #content
node_modules\#angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 54:3 theme()
node_modules\#angular\material\core\theming\_all-theme.scss 47:5 #content
node_modules\#angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\#angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\lawyer.scss 27:1 root stylesheet
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 60:7 #content
node_modules\#angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\#angular\material\progress-bar\_progress-bar-theme.scss 54:3 theme()
node_modules\#angular\material\core\theming\_all-theme.scss 47:5 #content
node_modules\#angular\material\core\theming\_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules\#angular\material\core\theming\_all-theme.scss 44:3 all-component-themes()
src\lawyer.scss 27:1 root stylesheet
Here is my scss file:
#use '#angular/material' as mat;
#include mat.core();
/*The define-palette Sass function accepts a color palette, described in the Palettes section above,
as well as four optional hue numbers.
These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue.*/
$my-primary: mat.define-palette(mat.$indigo-palette, 800);
$my-accent: mat.define-palette(mat.$green-palette, A700);
$my-warn: mat.define-palette(mat.$red-palette,A700);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
)
));
//#include mat.core-theme($my-theme);
//#include mat.button-theme($my-theme);
#include mat.all-component-themes($my-theme);
I tested the root cause is because of the last line, if I use core-theme and button-theme, not all-component-themes, it can build fine.
I don't understand what this compile error is describing because I do define the SASS variable:
Dart Sass failed with this error: Undefined variable.
╷
64 │ color: $sc-blue-light;
│ ^^^^^^^^^^^^^^
╵
_partials/navigation/_search.scss 64:12 #use
style.scss 65:1 root stylesheet
_utilities.scss
$sc-blue-light: #5BC2E7;
_search.scss
.search {
color: $sc-blue-light;
}
_style.scss (the main stylesheet)
#use '_partials/base/_utilities';
#use '_partials/navigation/_search';
The utilities are being loaded first, which is what I've read in other answers but it's not applying here. The file paths are correct.
All my other styles compile okay. It's just when I started using variables that this error comes up.
Any thoughts?
TL;DR
Add #use rule at top of the file in _search.scss too.
With namespace
#use '_partials/base/_utilities';
.search {
color: utilities.$sc-blue-light;
}
or without namespace
#use '_partials/base/_utilities' as *;
.search {
color: $sc-blue-light;
}
Quote from official sass
Members (variables, functions, and mixins) loaded with #use are only
visible in the stylesheet that loads them. Other stylesheets will need
to write their own #use rules if they also want to access them.
and
The simplest #use rule is written #use "", which loads the module
at the given URL. Any styles loaded this way will be included exactly
once in the compiled CSS output, no matter how many times those styles
are loaded.
Read about sass #use members
Read about sass #use namespace
I have a problem trying to setup a custom Angular Material theme. I'm trying to follow the basic example given in the docs (https://material.angular.io/guide/theming) but keep hitting an error during startup of app : "SassError: Missing argument $accent".
This appears to be trying to highlight the mat-light-theme() call, but as far as I can see I'm following the example file given in docs.
Does this look about right... (I'm hoping to be confident the theme file is right so I can start tracking down issues introduced elsewhere)?
#import '~#angular/material/theming';
#import 'mixins/definitions'; // just another scss file
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
#include mat-core();
$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
$my-app-warn: mat-palette($mat-red, A200, A100, A400);
// The warn palette is optional (defaults to red).
//$candy-app-warn: mat-palette($mat-red);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
//$candy-app-theme: mat-light-theme((
$my-app-theme: mat-light-theme((
color: (
primary: $my-app-primary,
accent: $my-app-accent,
warn: $my-app-warn
)
));
#include angular-material-theme($my-app-theme);
#include mat-core-theme($my-app-theme);
#include mat-checkbox-theme($my-app-theme);
Some bits that may be relevant from my package.json:
"dependencies": {
...
"#angular/animations": "~9.1.9",
"#angular/cdk": "^9.2.4",
"#angular/common": "~9.1.9",
"#angular/compiler": "~9.1.9",
"#angular/core": "~9.1.9",
"#angular/material": "^9.2.4",
...
}
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.7",
"#angular/cli": "~9.1.7",
"#angular/compiler-cli": "~9.1.9",
...
}
Working example, pay attention to the 'mat-light-theme' line:
#import '~#angular/material/theming';
#include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-amber, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
#include angular-material-theme($app-theme);
I have decided to use UiKit in my Rails 6 project and it works great. However, I just cannot get the icons to work. I checked a bunch of web resources but nothing solves the problem.
I'm using
- Rails 6
- webpacker (standard w. Rails6)
- yarn (standard w. Rails6)
- jquery (for custom coding)
In my view I am doing nothing but trying to show the icon:
<span uk-icon="heart">tests</span>
test
Crickets. Nothing.
I have UiKit installed with Yarn:
$: yarn list
...
├─ uikit-icons#0.5.0
│ ├─ #types/react#^16.9.11
│ └─ react#^16.11.0
├─ uikit#3.4.1
My application.js looks like this:
require("#rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("uikit")
require("uikit/dist/js/uikit-icons")
This does not throw an error. I tried the following:
require("uikit-icons")
and it resulted in a webpacker compiling error and an error message in the js console:
Uncaught Error: Cannot find module 'uikit-icons'
I tried adding
// loads the Icon plugin
UIkit.use(Icons);
that results in JS error (again, not using react. I am using jquery).
I even added the cdn url for the icons:
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
Nix. Silence. Nothing.
What am i doing wrong?
It looks like you are only requiring the UIkit library not assigning it to anything so it's throwing an error if you try to use it.
This worked for me:
const UIkit = require('uikit')
const Icons = require('uikit/dist/js/uikit-icons')
UIkit.use(Icons);
I'm trying to use Dart Sass' #use to customize Bulma, but as far as I understand it, when I do e.g.
#use "utilities/_all" with (
$blue: #0f52ba,
//etc
);
I can't then use e.g.
#use 'layout/hero';
Because the hero sass file expects a global $colors which would be redefined here as _all.$colors.
I also tried to load the utilities/_all without namespace like this
#use 'utilities/_all' as * whith (
//etc
);
To no avail… When debugging, I indeed see as set respectively _all.$colors and $colors but the hero files always throw this error:
Error: Undefined variable.
╷
14 │ #each $name, $pair in $colors
│ ^^^^^^^
╵
layout/hero.sass 14:25 #use