27,704 questions
1
vote
2
answers
65
views
Angular import global style file fails
I have an angular v20 project.
I have implemented a class "redborder" in "src/styles.scss" file and I am trying to @use the "redborder" class from a component style file ...
- 84
-1
votes
0
answers
153
views
Is it possible to get Vite to watch and trigger SCSS compile on file change?
I am new to Vite and am using it as part of a CMS's SDK repo. It came pre-configured from the repo.
I'd like to be able to configure it so that it (or something) watches my SCSS files compiles on ...
- 15.8k
Tooling
1
vote
1
replies
28
views
Set global CSS breakpoints in Blazor
I would like to set the CSS breakpoints globally in Blazor. What are some approaches? I prefer something that keeps the code or additional libraries quite simple.
- 266
-2
votes
0
answers
33
views
How do I resolve the red-sass issue?
I am trying to install a project 'Medusae' but I ran into some troubles. When I try to install dependencies via npm i get this error
npm warn cleanup ]
npm error code 1
npm error path C:\Users\ishaa\...
- 17
-1
votes
0
answers
40
views
Using css mixin as a dynamic class name with the BEM (Block Element Modifier)
I am trying create a dynamic classes using BEM along with the css mixins.
.card--sty-1{
&__circle{}
&__link{};
}
.card--sty-2{
&__circle{}
&__link{};
}
...for --sty-[n ...
1
vote
1
answer
55
views
Building sass with gulp - includePaths not having any effect
I am attempting to build a sass file that imports bootstrap from the node_modules folder.
I have added the bootstrap source folder to the includePath list.
But for some reason, the gulp compiler is ...
- 45.5k
-2
votes
0
answers
33
views
Sass @use Undefined Variable Error Despite Correct Import Order
I am facing a persistent Undefined variable error when using the new Sass module system (@use). My setup involves a modular file structure where variables are imported before they are used, but the ...
0
votes
0
answers
59
views
How to make K2 SmartForms (by Nintex) work with Bootstrap 5 + SASS?
I’m trying to style my K2 SmartForms (by Nintex) using Bootstrap 5 with SASS.
However, SmartForms have their own generated HTML structure and styles that often conflict with Bootstrap’s classes and ...
2
votes
1
answer
79
views
Conditional css class in Angular does not apply on first render
In Angular I have two equal components, but one has green-background:
home-options component html:
<section class="home-options">
<home-option
title="Encuentra tu ...
2
votes
1
answer
68
views
How to control height/size of the each dropdown on mat-option using system tokens - md3/angular20
I've been using newest Angular Material in Angular 20.
Trying to control stuff using mat.*-overrides but I can't find the option to change height of each mat-option inside of the form-field inside the ...
- 85
0
votes
1
answer
53
views
Modern scss variable inheritance
We need to modernize our theme to avoid deprecations and security issues. As such, we are upgrading many node packages including webpack and sass. I'm having some trouble with inheritance.
I am very ...
- 83
0
votes
1
answer
58
views
Why does Sass compile seem to ignore definition order of properties if they're changed in media queries
If I have the following scss rule:
.hero-wrapper{
padding: g.$padding-main;
@include r.medium {
padding: calc(g.$padding-main / 2);
}
@include r.small {
padding: calc(g....
- 25
0
votes
0
answers
51
views
FontAwesome Upgrade FA5 to FA7 Is Blurry
We are upgrading FA5 to FA7 and it went pretty smoothly. However the icons are not as crisp, especially when white on a dark background. The below picture shows a menu starting from the left with FA5, ...
- 23.4k
1
vote
2
answers
91
views
Mixin Angular 19
I don't know what this error means. It's the first time it appears to me... I'm using angular ^19.2.0 (non-standalone) with bootstrap ^5.3.8.
> X [ERROR] Undefined mixin.
╷ 15 │ ┌ @include ...
2
votes
2
answers
110
views
Why isn’t my CSS position: sticky working? [duplicate]
I have sidenavigation, that has container as a wrapper for position: sticky and height of container is equal to next element in it`s parent flex component:
I am using Nextjs and SCSS:
export function ...
- 75
1
vote
2
answers
72
views
VS code no longer recognises css or scss files
I am using VS Code and NextJS to build the frontend for the application.
VS Code is reporting the following error:
Cannot find module or type declarations for side-effect import of
'~/styles/layout/...
1
vote
0
answers
71
views
How can a removal of a boundary check introduce a BSYNC instruction in a following memory action?
I have some CUDA kernel code doing the following:
half * restrict output;
half v;
// ... etc ...
int i = whatever();
#ifdef CHECK_X
if (i >= 0 && i <= SOME_CONSTANT)
#endif
{
output[...
- 137k
0
votes
0
answers
42
views
Sass + PurgeCSS + SvelteKit: properly hash filenames
I have some code using SvelteKit for JS, Sass (with Bootstrap) for CSS, optimized with PurgeCSS, and compiled with Vite.
Here my vite.config.js:
import { sveltekit } from '@sveltejs/kit/vite';
import {...
- 660
1
vote
1
answer
57
views
I have a problem using SASS with Live SASS Compiler
I am trying to use W3Schools CSS framework in web project. I am using VScode, Python , Django and the Live SASS compiler extension. What I want is to be able to use one or more of the W3Schools ...
- 73
0
votes
0
answers
28
views
"@use rules must be written before any other rules." - can't find the file with "other rules"
Migrating from @import to @use/@forward syntax in SASS and getting error "@use rules must be written before any other rules." while compiling.
I can't find which rule(s) would be defined ...
- 11
0
votes
0
answers
38
views
How to create a transparent div that has a border with inner radius? [duplicate]
I want to create a div that is transparent but has a inner border radius. The div itself should not have a outer border radius.
The end result should be a square that is itself transparent but has a ...
- 1
0
votes
0
answers
117
views
PrimeNG 17 → 18 theming: how to keep our v17 look?
We upgraded an Angular app from PrimeNG 17 (classic theme) to PrimeNG 18 (new tokens/presets). After the upgrade, the UI changed notably (spacing, paddings, border radius, fonts, table row height, ...
- 505
0
votes
0
answers
41
views
Dartsass import -> use/forward migration
I'm trying to migrate my Rails 5.2 project from using sassc-rails to dartsass-sprockets.
My filetree looks like:
/app/stylesheets/
/aron.sass
/colors.sass
/aron/file.sass
/nora/nora.sass
/...
- 38
0
votes
0
answers
101
views
Customize Angular Material Components using mixins to fit my UI
We (my team) recently upgraded our Angular to Version 15, and we have had many problems due to MDC- changes.
My work is to upgrade our components library to be MDC based. I noticed all the mixins ...
- 1
1
vote
1
answer
122
views
How to dynamically override all Bootstrap 5 primary/secondary colors at runtime in Angular without rebuilding SCSS?
I’m building an Angular 19 application that loads its primary and secondary brand colors from a backend API at runtime.
I want all Bootstrap 5 components (.btn-primary, .bg-primary, .alert-primary, ....
2
votes
0
answers
74
views
Jekyll not generating /assets/css/main.css from SCSS (404), even with front matter and relative_url
I want to build a Jekyll site with a custom dark neon theme. SCSS partials live in _sass/ and should compile into assets/css/main.css, linked in the head include.
Expected
Jekyll compiles assets/css/...
- 11
0
votes
1
answer
55
views
Angular mat-form-field not resizing in flex-box
I am trying to use Angular material form field along with flex-box, but unable to make them shrink on screen resize, i am sure i am missing some flex-box property or style, please help me in fix this ...
- 945
0
votes
0
answers
39
views
AngularJS + Compass project fails to run locally on Windows (grunt dev / SCSS )
I’m trying to run an old AngularJS project locally on Windows 11. The project uses:
SCSS with Compass
Pug templates
Grunt tasks (grunt dev / grunt build)
Node.js + Bower
According to the README, I ...
- 1
4
votes
3
answers
691
views
`@apply` is not working and does not validate actual TailwindCSS v4 class/utility names in an Angular (with Sass) project
I've recently created a new Angular application (v20.3.0) and I installed TailwindCSS v4, using the Angular documentation guideline which is very simple to do (also TailwindCSS in its documentation ...
- 127
0
votes
1
answer
114
views
Cannot use CSS variables (var(--bs-primaryColor)) as $primary in Bootstrap SCSS – throws “is not a color” error #41746
We are trying to use dynamic colors coming from our backend to replace Bootstrap’s primary and secondary colors at runtime. Our approach is to map Bootstrap’s $primary and $secondary SCSS variables to ...
2
votes
1
answer
49
views
Text color of mat-chip in Material from html markup
How can I override the text color of the mat-chip component?
[style.background] works but [color]="'white'" doesn't - here would be 'label.color2' used.
<tr *ngFor="let label of ...
- 27
1
vote
1
answer
442
views
`@import "tailwindcss";` does not work when used in a file with an `.scss` extension
I wanted to use Tailwind and SCSS on my Nuxt site, but I noticed that the only way to make it work is if the file where I put @import is a CSS file; it doesn't work in an SCSS file.
I don't understand ...
1
vote
0
answers
25
views
Using SASS partials in a multi-client setup
Since @import will be deprecated in Dart SASS, I've tried to find a solution for the following problem. I want to use the same partials for different clients which have different, colors, fonts, font ...
- 11
2
votes
6
answers
667
views
Animated height without `@angular/animations`
With the latest angular version, @angular/animations is being deprecated.
I am struggling with migrating an animation in my application. This minimal example shows the animated height.
Minimal example:...
- 147
0
votes
1
answer
59
views
Hard to customize Angular material tooltips
MY angular project is using angular 18.2.3 and material is added using "ng add" to be compatible. BrowserModule, BrowserAnimationsModule, MatTooltipModule are imported and exported in shared....
0
votes
1
answer
992
views
WARNING: Deprecation [plugin angular-sass] src/theme/global.scss
[WARNING] 2 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings. [plugin angular-sass]
angular:styles/global:styles:1:8:
1 │ @import 'src/theme/global.scss';
...
- 66.2k
0
votes
0
answers
78
views
Is there a way to check overflow of the span using just css?
<span *ngIf="!filterExpand && hasAppliedFilters" class="applied-filters">
<span class="single-line-filters" #filtersContainer>
<ng-container *...
- 71
0
votes
1
answer
123
views
Styles not being applied to page using spa mode in build
I have problem with my React app, using Vite and React-Router v7, in framework mode, ssr: false.
When using dev mode, all styles are being applied correctly (I'm using moduled SCSS, and one global app....
- 23
0
votes
1
answer
54
views
Certain div not being shown on deployed site in Firefox?
So I'm building a site and I deployed it, but for some reason Firefox doesn't want to show one of the divs (Follow Us) for the footer. This only happens on the deployed version, localhost shows "...
- 417
2
votes
1
answer
90
views
Change font family 'MyriadPro' for Angular material 18, in mat-tab
I'm migrating angular/material from 12 to 18, and refactoring my project css also
In Package.json:
"@angular/core": "^18.2.13",
"@angular/material": "^18.2.13",
...
- 61
0
votes
1
answer
79
views
Conditional @use in dartsass
I have a Rails 8 project using dartsass, my top-level application.scss looks like
@use 'bootstrap.min.css';
@use 'colours.scss';
@use 'base.scss';
:
and all is well, but one thing I would like to do ...
- 1,120
2
votes
2
answers
75
views
Navbar animation flickering only on IOS Device
This is for a Navbar component that only shows up after the user scrolls to a certain section.
At start it should not take up any space in the view.
This works fine as intended.
But observing a ...
- 3,681
1
vote
0
answers
46
views
SCSS import ignored – one component file (folders.scss) never appears in compiled CSS
I'm working with a SCSS project containing a main index.scss that imports multiple component files (e.g. badges.scss, buttons.scss, folders.scss). The structure is:
src/
├ components/
│ ├ badges....
- 33
0
votes
1
answer
63
views
How to run dart sass?
I follow [this tutorial ion the dart sass webpage).
On an Ubuntu@Ubuntu 24.04.2 machine, I installed dart via:
#!/bin/bash
[ "$UID" -eq 0 ] || exec bash "$0" "$@"
apt-...
- 67.6k
2
votes
1
answer
79
views
Router outlet sibling styling
I've come back to Angular after a long time and am a bit confused. Last time I used angular any routes defined where being rendered as children of router outlet. But now it is being rendered as child ...
0
votes
2
answers
76
views
Angular animations not applying to child elements [closed]
I'm new to angular animations and was following a guide on how to animate an item. This is the template
<div
#header
[@nav-header-animate] = "{
value: ...
2
votes
1
answer
52
views
Angular, using font from "theme" npm package in a angular component library
I have created an npm package “theme” that contains @font-face and font-size definitions. This npm package is integrated into an Angular library “shared-elements”, which contains the components. This ...
- 63
1
vote
0
answers
46
views
Webpack changes URLs in CSS during build: how to keep original relative paths in url()
I have a CSS file with a @font-face declaration where font paths are specified as url("./icons/tficons.woff2"). However, when building with Webpack, these paths get rewritten to url(../tflex-...
- 112
0
votes
1
answer
58
views
Wrapping text first when view gets too narrow
I, as a certified n00b, am having some trouble laying out some stuff with nested views in React/Reshaped in a footer for a narrow/mobile-device view. When there's enough space, it's easy enough:
When ...
- 105
0
votes
0
answers
99
views
Why do I get an undefined variable error when overriding a Bootstrap 5 variable in Sass?
We are starting a new project using Next.js and Bootstrap 5, with Sass. We are trying to create a new theme, so we created a theme.scss file:
@import '~bootstrap/scss/functions';
$primary: #005EA2;
$...
- 1