27,739 questions
1
vote
1
answer
27
views
How to reduce matInput height to certain value?
I have simple matInput element from angular-material library:
<mat-form-field class="example-form-field">
<mat-label>Clearable input</mat-label>
<input matInput type=...
- 1,011
0
votes
0
answers
6
views
Duplicate styles in css after compiling from scss - adobe AEM
I'm working with optimizing the site. We are on Adobe AEM and using scss.
When the code compiles into the site.css, there are duplicate styles in the css style sheet. I need to merge these but when I ...
- 43
0
votes
0
answers
17
views
Sass @use 'bootstrap/scss/bootstrap' failing with 'Can't find stylesheet to import' in minimal project
I'm encountering a persistent issue where Sass is unable to resolve the import path for Bootstrap, even in a minimal test project. I'm using gulp-sass with Dart Sass.
Here's the problem:
I'm trying to ...
- 860
0
votes
0
answers
13
views
How can I implement @use with layer()?
In CSS, @import "typography" layer(typography) will scope an import to that cascade layer.
However, in Sass @import is deprecated, and according to this Sass issue, it doesn't seem like the ...
- 3,213
0
votes
1
answer
23
views
How do i use overflow-x: auto and position: sticky at a same time in my typescript and scss code
I'm working on a React table where both the header and body exist within the same div. I need the table header to be position: sticky without setting a fixed height while ensuring that overflow-x: ...
- 24
0
votes
0
answers
29
views
Conflict Between Camaleon CMS and Administrate Gem Due to Sass Processor Dependencies in Rails
Camaleon CMS depends on dartsass-sprockets for its styling, whereas the Administrate gem uses sassc-rails. When I attempt to install and initialize both gems in my Rails application, I encounter a ...
- 409
-1
votes
0
answers
34
views
How to create this stylish 'element format' effect using only CSS? [closed]
I came across this design mockup and found the form's style very interesting
I know this could be achieved using SVG or even an image, but I'm wondering if it's possible to replicate it with CSS, as ...
-4
votes
0
answers
19
views
React + Vite + SCSS Help me to style files broken [closed]
I created a new React project with Vite and SCSS. Then, I uploaded Glowing theme (contain Bootstrap and html files) style files like JS and CSS. Everything seen as normal in devtools console. Files ...
- 115
1
vote
0
answers
46
views
Angular Workspace Problem after Update from 16 to 19
To sum up, in the company where I worked, we had a rather old Angular project that had not been updated for ages. "Project" might be the wrong term; I will continue to refer to it as a ...
1
vote
1
answer
61
views
How to dynamically change Bootstrap v5.3 primary color at runtime in Angular v17?
I am working on an Angular application that uses Bootstrap for styling. I want to allow users to select a theme color, and dynamically update the Bootstrap primary color (--bs-primary) at runtime ...
- 727
0
votes
0
answers
25
views
Using SASS to invert color brightness
I have the following function in SASS and it mostly works:
@function invert-brightness($color, $limit: 0)
$h: hue($color)
$s: saturation($color)
$l: lightness($color)
$limit: max(...
- 864
0
votes
1
answer
40
views
Why -webkit-appearance: none is needed to style input[type="search"]::-webkit-search-cancel-button
I have a CSS Element such as given below:
<input type="search" />
And styling above element with below CSS:
input[type="search"]::-webkit-search-cancel-button{
-webkit-...
- 52
0
votes
1
answer
58
views
How to use SCSS with Bootstrap in C# Blazor?
I am working on a project with C# Blazor Web App and I want to use Bootstrap 5.3.3 (I have never used it before in JS or C#.)
I was reading online that the Bootstrap classes are read-only and to ...
- 19
1
vote
1
answer
33
views
How to scope CSS resets in a Chrome DevTools extension without affecting other websites?
I'm developing a Chrome extension that integrates with DevTools, using React, SCSS, and Vite.
I want to apply a global padding reset for my extension so that it doesn't use any default paddings or ...
- 43
0
votes
0
answers
25
views
"gulp-sass" and "sass" with ES module is not working , when try to get css from scss files
I’m using Gulp v5.0 to compile, minify, and clean the CSS for my application. I've migrated from CommonJS to ES Modules (ESM) in my Gulp setup.
There’s a custom component (maintained by another team) ...
- 136
0
votes
2
answers
31
views
How to continuously change style using sass
I recently learned Sass and am working on a project. In this project, whenever I change my styles, I open the terminal and type the command sass style.scss style.css to update my CSS file.
Is there a ...
0
votes
0
answers
27
views
How to tree shake unused SCSS classes in Astro
I'm using Bootstrap in Astro, importing the modules I need and customising them in SCSS. But I have noticed that the site is noticeably slow due to Bootstrap's bloat.
How can I tree shake the unused ...
0
votes
2
answers
76
views
How to import font assets?
I am trying to create an Angular 19 library with a personalized fonts linked directly into a global SCSS file.
On build time, I have the exact same error being raised by builder:
src/lib/label/label....
0
votes
1
answer
48
views
how to change from @import to @use in scss
I've broken some code by changing from import to use. The idea is to create a flexible & reusable typography style file which can be used to generate a bunch of classes to style the app.
...
- 1,661
0
votes
1
answer
57
views
How to add extended colors on the latest angular material 19 theme
I used the ng generate @angular/material:m3-theme to generate theme colors and apply it on style.scss but when I did this
style.scss
@use '@angular/material' as mat;
@use './_theme-colors.scss' as ...
- 1,596
0
votes
0
answers
59
views
Dropdown menu is showing white background "Wordpress"
I am using the Klinta - Cleaning Services Elementor Template Kit
https://preview.themeforest.net/item/klinta-cleaning-services-elementor-template-kit/full_screen_preview/35243306
Since my website is ...
- 11
0
votes
0
answers
39
views
How do I output multiple CSS files from Sass that each target a different media query?
Let's say I have a mobile version and a desktop version of my website, and I use media queries to alter the styling:
.my-component{
display: block;
@media (max-width: 600px) {
// ...
- 4,360
0
votes
3
answers
102
views
SCSS Module Styles Only Work with next dev --turbo
I’m using Next.js 15 (with the app directory) and Mantine 7 in my project. I'm styling Mantine components using SCSS modules (*.module.scss), but the styles behave inconsistently depending on how I ...
- 251
0
votes
1
answer
98
views
Angular Material 19 styling toolbar not working
I am trying to understand how the component overrides are working and I am more of an angular beginner. In the following code which I mostly took over from this repo repo, I am trying to change the ...
- 443
1
vote
1
answer
35
views
P-Dialog content is getting cut when zooming in
I added a PrimeNG dialog with an image inside. I want to zoom in and out of the image using the scroll. It seems like the p-dialog has the overflow property set to auto, but my content keeps getting ...
- 31
0
votes
0
answers
28
views
Migrating to Sass's newer import systems has lead to duplicate imports
I'm trying to migrate to Sass's newer import systems, @use, @forward, and @include meta.load-css(), but after finally getting everything working, I noticed that my "helper" rules are being ...
- 18.6k
2
votes
1
answer
74
views
Overwriting a Sass Color Map with @use ... with Fails: Undefined Variable
This is our repository structure. In public/scss/ are all default SCSS files that provide basic styling to the website. And everything that comes from base/themes can overwrite the stuff in src. So ...
- 294
1
vote
1
answer
46
views
VSCode Misinterprets SASS Interpolation Syntax with `@apply`, Showing False Validation Errors
I am using Tailwind with SASS, which requires interpolation when using !important inside @apply. See the documentation.
However, VSCode seems to misinterpret this syntax combination, displaying a red ...
- 2,678
1
vote
1
answer
44
views
How not to access second last two elements by CSS
How can I add "," separated content: "," to all ul > li not the last two lists
<style>
ul li:nth-last-child(2)::after { content: "," }
</style>
is not ...
- 13
1
vote
1
answer
55
views
Hover is not applied in child element [closed]
I’m building a website with a dropdown menu for the "About Us" section, and I want the dropdown to appear on hover. However, the hover effect is not working. The dropdown does not appear ...
- 11
0
votes
0
answers
48
views
How to have named imports and custom file names with Vite, React, Typescript and SCCS modules
I have a Vite/React/Typescript app configured with sass and I would like to:
Import the styles as named imports:
import { styles } from "my-component.styles.scss";
Configure Vite (or sass)...
- 11
1
vote
1
answer
43
views
Load styles in Ionic dynamically from a file downloaded via http
First, sorry for my English...
I'm trying to develop an app with standalone Angular/Ionic using Capacitor. I would like it to have pre-established styles by default and for them to be declared in my ...
1
vote
1
answer
186
views
CSS files have a lot of unwanted code after running npm run build
I have created Webpack 5 demo for plain HTML, CSS and JS using TailwindCSS v4.
GitHub: sanketpbhamre/tailwind-4-webpack-5
Webpack CSS configuration
module: {
rules: [
{
test: /\.(s[ac]|c)...
- 644
1
vote
1
answer
25
views
Problems with adaptation in mobile versions
I finished my project and the last problem with adapting to phones remained, in general it looks good on the phone, but when you set the width to 320 pixels, there is a horizontal scroll in 2 sections,...
- 51
0
votes
1
answer
18
views
Centering slider navigation arrows according to the image not parent container
How can I center slider navigation buttons based on the images inside each slide instead of the parent container? I have a slider section displaying products with names and prices. The prev/next ...
- 638
0
votes
0
answers
45
views
Facing issue of Can't find stylesheet to import when using webpack and sass loader
In our original setup of react + webpack, when running npm start we are facing "Can't find stylesheet to import" issue. But this happens only in Windows and not in MacOS.
To replicate this ...
0
votes
0
answers
17
views
Overriding CSS settings in a Jekyll Gem-based theme
I have Jekyll running locally with a theme I like, no-style-please. Everything is working as expected.
However, on some content, the overall page width is a little smushed. I hunted around in the ...
- 513
0
votes
1
answer
61
views
Customize Vuetify SCSS variables in Nuxt 3 and access them globally
Goals:
I'm configuring Nuxt 3 with Vuetify 3, and my goal is to:
Customize SCSS variables for Vuetify.
Access these customized SCSS variables both inside Vue components and from SCSS files in assets/...
1
vote
0
answers
295
views
How to use SCSS in a rails 8 project?
I just started a new Rails 8 (Ruby 3.4.1) project with the new propshaft asset pipeline and I can't get SCSS to work. I've tried adding the sassc-rails gem to my gemfile, like in my recent Rails 7 ...
- 131
5
votes
2
answers
3k
views
How to install TailwindCSS on Angular 19 that uses SCSS?
I have an Angular 19 app which uses SCSS and I have TailwindCSS 3.4.17 setup and it works.
Now I wanna upgrade to TailwindCSS v4. I follow the official instructions to install it on Angular from here ...
- 186
0
votes
0
answers
27
views
Set a Blazor variable in scss
Is it possible to set a Blazor variable in scss. I'm trying to show/hide a component on hover. Something like:
Scss File
Frame {
&:active {
ShowCopyIcon {
display: none;
}
...
- 1
1
vote
0
answers
45
views
How to prevent rotated mat-table headers from being overlapped by adjacent columns?
In my Angular app, I’m using mat-table with some long column names. To improve readability, I applied a rotate(-30deg) transformation to the header labels. However, this causes the labels to be ...
- 77
1
vote
1
answer
35
views
How to Access Quasar CSS Variables Within Script?
I'm using Quasar 2.17.7.
If I have the below styles in my quasar.variables.scss file:
$company-base: #3c3c3b;
$company-accent: #89c3ce;
$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;
How ...
- 91
1
vote
1
answer
136
views
$theme does not exist in your theme config
Im getting this $theme does not exist in your theme config issue in that first line that seemingly came out of nowhere. This code snippet is in app\node_modules@angular\material\input_input-theme.scss....
2
votes
2
answers
491
views
Angular material 19 - mat-typography not applying in custom theme
I set up a new angular project with angular 19 and ran into the issue mentioned in the title.
Added material with the ng add cli command, and selected "yes" to the prompt if I wanted to use ...
- 73
0
votes
1
answer
106
views
Custom Bootstrap color theme with Rails 8
I created a new Rails 8 app with bootstrap css:
rails new my_app -c="bootstrap"
and Bootstrap worked out of the box. It created an application.bootstrap.scss file that included:
@import '...
- 400
0
votes
0
answers
61
views
How can I replace node-sass module?
I'm trying to start my website again after few years but can not change the code because my gulpfile.js for the compiler does not start.
Terminal says that the reasoin is that node-sass I used before ...
- 1
0
votes
0
answers
10
views
Put a SVG in a select as a before element [duplicate]
I'm trying to do a select element with a label inside and I have to do that with an image (svg) as a before element, but the image doesn't appear and I can't figure it out what is wrong with the code. ...
- 309
0
votes
1
answer
40
views
Visual studio Code using Sass is not compiling
I tried to compile sass using Visual Studio with the “live sass compiler” extension, I'm a bit confused about how to set Sass with CSS. kindly check to see if this correct setting compares with the ...
- 41
1
vote
2
answers
54
views
Make nav bar color match color of sections when scrolling
I would like to change the colour of my navigation bar to suit the colour of the section scrolling past, and in reverse when scrolling the other way.
For example, if the navigation bar is currently ...
- 19.7k