27,756 questions
0
votes
1
answer
26
views
How to Apply Background Color for Children in a Repeating Pattern (Blue, Purple, Red) [duplicate]
I have a parent div, with a varying number of child divs. The child divs will always be within a parent div.
I want to color the child divs in an order, so that the 1st child is blue, the 2nd is ...
- 1,654
0
votes
1
answer
192
views
Laravel Mix don't build with Tailwind v4
When I use Laravel Mix with the mix watch command, changes in an imported scss file do not cause a rebuild if I include TailwindCSS
app.scss
@forward "tailwindcss";
@forward 'test.scss';
...
- 21
1
vote
1
answer
40
views
My SCSS files are not getting saved in css folder with Gulp
I am running my gulp task for compiling my scss files and then convert them to css.
The scss files are getting compiled correctly in the cli. But the css files are not getting saved.
Below is my scss ...
1
vote
0
answers
35
views
Styles not working when using SCSS Modules with Rollup
I am using rollup to build my package and scss modules for styling. For some reason, when I am importing the build to my next 14 project, the styles are not getting applied. I can see the class ...
- 925
0
votes
0
answers
166
views
Jekyll: How to use automatic SASS migrator?
I get a lot of deprecation warnings on my jekyll sites.
I have found out this article, that shows automataed migration:
Automatic Migration
You can use the Sass migrator to automatically update your ...
- 1,386
1
vote
1
answer
31
views
Different height of mat-icon-button in chrome devtools
I have this template:
<div style="display: flex; align-items: center; width: 400px; margin:16px; background-color:beige; color:chocolate">
<span>Hallo World!</span>
...
- 1,354
0
votes
0
answers
30
views
Angular SSR stylesheet is being loaded but not applied
I am creating an angular app using server side rendering and will have multiple clients using it, so I want the page to have different styles or themes.
I'm trying to load the themes in the page but ...
1
vote
2
answers
39
views
Angular Material 3 button not showing azure (#005cbb) color
This is my HTML:
<button mat-button class="basic">Basic</button>
This is my scss:
.basic {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$azure-...
13
votes
8
answers
10k
views
How to upgrade TailwindCSS?
I'm currently using Tailwind v3 in my Angular project (https://github.com/edissyum/opencapture/tree/dev_nch).
Today I tried to upgrade to Tailwind v4, but without success.
I didn't use PostCSS, I just ...
- 899
10
votes
5
answers
9k
views
Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
First command runs without any errors npm install -D tailwindcss, when I use the second command npx tailwindcss init -p, it gives me:
NPM error could not determine executable to run
I have tried ...
- 101
1
vote
0
answers
20
views
Configured webpack with scss module gives error Module Build Failed expected {
I am trying to use scss modules in my React app but getting error.
I configured my react app using webpack, now when I went on to configure scss modules, i got this error. The webpack build is failing,...
0
votes
1
answer
37
views
Unable to Apply CSS Styles to Angular Material mat-icon in Nested Components
I am trying to apply custom styles to a mat-icon element inside an Angular Material component, but no matter what I do, the styles won't take effect. Here's a simplified version of my code:
Html:
<...
- 957
0
votes
0
answers
37
views
How to override style inherited from quasar framework (v1)?
I need to remove a q-table__separator component that is taking up unnecessary space in my table footer! It is a component inherited from Quasar, it was not added with code, it is part of the Quasar ...
0
votes
0
answers
22
views
All child disabled css is coming from .grand-parent class and but need to override disabled childs css based on override-grand-parent class [duplicate]
I element level some disabled CSS is coming from grand parent but i want to override disabled CSS which is coming from grand parent based on a class called override-grand-parent.
.grand-parent ...
- 11
0
votes
0
answers
38
views
How to generate random numbers in percentage? [duplicate]
I read this topic about random numbers. I'm interested in how to add "%" for random number in SCSS or CSS.
My variant of code doesn't work:
.star{
position: absolute;
background-color: #...
- 284
0
votes
0
answers
60
views
Change node-sass to sass v1.83.4 in React project with Bootstrap v5 and Webpack
After upgrade i change also bootstap to 5.3.3 i get wrong @import "core" keyword erros so i change it to @use "core":
find src -type f -name "*.scss" -exec sed -i 's/@...
0
votes
0
answers
44
views
Removing SCSS included file warnings
I am building a Svelte project which relies on GDS components and styling from GOV UK frontend, and I get a lot of error messages similar to the one in the Warning message section below.
Is there a ...
- 5,083
0
votes
0
answers
442
views
Vite, React, SCSS - Can't add SCSS (Embedded Dart Sass couldn't find the embedded compiler executable)
Current setup is below.
Using this in package.json / devDependancies:
"sass-embedded": "^1.83.4",
Folder setup:
component.tsx
component.scss
In component.tsx:
import './component....
- 1,001
-1
votes
1
answer
69
views
Rider + Blazor + Scss + hot reload
I have been using the node sass plugin and building my scss files during my dotnet build process, which works, but takes so much time whenever I make a change.
I decided to switch to using prepros to ...
- 73
0
votes
0
answers
52
views
Can't import SCSS modules after migrating from Webpack v4 to v5
After upgrading to Webpack 5 and Node 20, I'm facing an issue where SCSS files are not being properly loaded in my React project. When I try to import a SCSS file like import styles from './...
2
votes
1
answer
2k
views
Custom Theme for Angular 19
I am trying to create a custom theme for my Angular 19 application.
The following is working fine in my theme.scss file, using built-in themes:
@use '@angular/material' as mat;
$primary-palatte: mat.$...
- 773
1
vote
1
answer
65
views
Position sticky for Kendo Grid column group
The column group in my kendo grid has the name of what those columns are giving information about, but they are so many columns that they overflow on the x axis and you need to scroll.
My issue comes ...
- 81
0
votes
0
answers
37
views
How to import SASS file as inlined CSS (not JS) in SvelteKit/Vite
How can I import a SASS file as inlined CSS (not JS) using SvelteKit and/or Vite?
If I would like to configure SvelteKit (or Vite) to input src/app.scss and output SOME_PATH/app.css.
The SASS file is ...
- 17.9k
0
votes
2
answers
51
views
How to construct background image URL using CSS variable in a SCSS file Angular
In Angular + single-spa application want to construct a image url in SCSS file using a CSS variable
Current Implementation:
.image {
content: '';
background-image: url('/assets/images/edit.svg');
...
- 7,428
0
votes
0
answers
19
views
in Flexbox, How to make sure each div has same height? [duplicate]
as you can see, the height of div7 and div8 is shorter than others, how to copy or make sure all of them has same height.
Flexbox is copying the tallest div, but when the item move in bottom due to ...
0
votes
0
answers
3
views
React-md package import bug in scss
I have a big project that uses ChartIQ.
In the past, we used react-scripts start for run the project
Now we are using react-app-rewired start for run with the ChartIQ implementation.
It's not a main ...
- 1
0
votes
0
answers
70
views
Next JS v15 next/font/google error in downloading font Poppins
Getting error while downloading the Google font using Next.js error occurred while deploying on the testing server
Error [FetchError]: request to https://fonts.googleapis.com/css2?family=Poppins:wght@...
- 17
1
vote
1
answer
96
views
Angular Material icons not showing
I am trying to implement an offline web application based on Angular Material (v.18.2.x) but I cannot see the icons. Here is my implementation:
package.json
[...]
"dependencies": {
&...
- 13
1
vote
0
answers
44
views
How to implement dual hover for desktop and tap feedback for touch devices in a React hamburger menu?
I'm working on a responsive navigation component using React and SCSS. My goal is to have a hover effect on desktop when a user hovers over the hamburger icon and a tap effect on mobile devices where ...
- 442
1
vote
1
answer
40
views
Nesting selectors (&) required to target nested html elements
I'm really confused if we should or should not use the & nesting selector in the following situation
.my-class {
& > a {
color: yellow;
}
}
VS
.my-class {
> a {
color: ...
- 1,897
2
votes
1
answer
71
views
Deploying Angular App on Azure SWA with SCSS Issues
I am using an Angular app out of the box with the CLI generation. Currently trying to deploy to an Azure Static Web App resource and am getting build errors. I get the following error for each of my ...
0
votes
0
answers
128
views
refactoring for Dart Sass 3.0.0 => mixins are undefined after changing "imports" to "use"
I am trying to refactor my scss app but after changing all my @import to @use now some mixins are showing undefined.
./styles.scss
@use './fonts' as *; // mixin defined here
@use './base' as *; // ...
- 3,040
0
votes
0
answers
36
views
Jinja linking resources from separate projects
With Jinja2, I can normally link to a CSS stylesheet from HTML template with something like:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
...
- 1,202
0
votes
0
answers
10
views
Using mat-tab component, first tab border stretch full length page
I use mat-tab inside mat-card and no custom SCSS style for my project. I have checked many forums, but I am not getting any correct solution please let me know if anyone has any ideas.
mat-tab-group ...
- 1,736
0
votes
1
answer
59
views
Issue with layout, vertical scrolling on body element and a table with horizontal scrolling & sticky headers
I have overflow-y auto on body and a content which contains a table. There is a div that contains the table and it has overflow-x auto for horizontal scrolling in table view. The table has a thead ...
- 21
0
votes
0
answers
53
views
Custom build of Telerik Kendo Themes
I'm trying to update version of Kendo Themes in my FE project. I'm building all CSS files on my side, because it is compilation of Bootstrap, Kendo and other parts.
I uninstalled node-sass and ...
- 442
2
votes
2
answers
866
views
Setting Mat-Button color in Angular Material 19 (M3)
I'm using angular material 19.0.3 and the m3 theming mechanism
here's my style.scss
html {
color-scheme: light dark;
@include mat.theme((color: (
primary: ft-green-theme.$primary-palette,
...
- 186
0
votes
2
answers
165
views
How to handle global SCSS variables with `@use` when migrating from `@import`?
I'm migrating my SCSS files from @import to @use, as @import is being deprecated. I have a mixin defined in a separate file that relies on a global SCSS variable. Here's an example:
// mixin.scss
@...
- 3,836
0
votes
0
answers
18
views
Using ICSS in an Angular Project
Recently my goal has been trying to make the scss and the typescript part of my application communicate better, in order to minimise code repeating and hard-coding.
For example, many times in a ...
- 21
0
votes
1
answer
105
views
How to use SASS partials in Tailwind @layer?
I was hoping I can segregate my tailwind component classes into multiple files and import them in the @layer components {}. And so I have created partial (underscored) .scss files .
My files are ...
- 2,678
0
votes
1
answer
37
views
How to use primary/secondary Vuetify colors in a SCSS gradient?
I wanted to create a linear gradient from primary color to fully transparent color to accent an element. I'm using SCSS in Vue 3 single-file components.
I tried, as guides suggest:
background: linear-...
- 20k
7
votes
0
answers
339
views
Global SaSS import / Use Vite 6 SaSS 1.83
So I recently updated my react project dependency and I'm having an issue with SaSS.
Before the update I was importing a SaSS file in Vite's config file like so:
css: {
preprocessorOptions: {
scss: {...
- 607
0
votes
1
answer
265
views
Undefined @mixin after updating sass-loader and sass to the latest versions in React TS
I have the following issue when running command npm run build in my React TS app
ERROR in ./src/main/webapp/app/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)...
0
votes
0
answers
141
views
How to transition from @import to @use without changing every file?
I saw that SCSS deprecated the use @import, and I'm struggling to update my code to use the suggested @use.
I currently have one main file that imports all files, starting with the variables, like so:
...
- 65
0
votes
1
answer
537
views
The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. with Vue2
I realize similar questions have been asked before about this warning, but none of the proposed solutions have solved this issue for me, or been applicable in my scenario.
I have recently upgraded ...
- 661
0
votes
0
answers
227
views
Angular 19 Storybook Can't Compile scss
I am trying to set up an angular library with storybook and I keep running into stylesheet issues (ng g library reusable-components) but it can't compile the scss and I keep getting an error message:
...
- 364
0
votes
0
answers
27
views
Angular Multi Library in a Workspace
In order to manage my own projects better in Angular, I will create some libraries named ngx-suffa in the workspace.
Each library will be under the same workspace.
For example:
@ngx-suffa/core, @ngx-...
- 21
1
vote
0
answers
71
views
FOUC With inertiajs (SSR), Vite and SCSS
I am building an application using Laravel, inertiajs (SSR), Vite, Vue 3, and SCSS
I have pages and component and each page/component has its own style file and it is imported inside of this page/...
- 11
0
votes
0
answers
55
views
In framer motion how can i handle the overflow in motion.div
I am trying to create a parallax card effect for a website but while making the cards responsive I have been stuck on this that the contents of the card overflow the given height which cuts out the ...
1
vote
2
answers
39
views
ionic controlling height of controller modal
i am using a controller popup launching like this
async openNwInsights(){
const modal = await this.modalCtl.create({
component: ExplainNetworthComponent
})
modal.present();
...
- 1,278