Questions tagged [sass]

Sass (Syntactically Awesome Style Sheets) is an extension of CSS adding features like nested rules, variables, mixins and class extensions. This enables developers to write structured, manageable and reusable CSS. Sass is compiled into standard CSS. It is primarily a CSS pre-processor language that accepts both the CSS and its personalised syntax of writing visual design codes.

Filter by
Sorted by
Tagged with
0 votes
0 answers
5 views

How to fix the @import or @use error in angular v17 when using the tilde ~ from third party aoftware

In my angular v17 project I'm using a third party software package. To get its styles I need to add some @use statements in my styles.scss @use '@thirdparty/magic/src/styles/magic-font Inside that ...
Jeanluca Scaljeri's user avatar
0 votes
0 answers
25 views

Issue with styled components causing 'useContext' error in React App.js

I can't use styled components because after i type this syntaxis: const Wrapper = styled.div ` width: 600px; margin: 80px auto 0 auto; `; Everything goes wrong and error with 'useContext' appears P.S ...
Newbie's user avatar
  • 3
0 votes
1 answer
21 views

Dynamic Multiple Font load as per env file

I've one file font.css where multiple fonts are loaded but i need to make dynamic font path as per the env file so how can we achieve that in react You can suggest me the feasible solutions. I've ...
PankajNihalani's user avatar
0 votes
0 answers
8 views

Difficulty in Achieving Design on [FIGMA SCREENSHOT] – SVG Waves Not Adapting to Container Item 2 size

Hello Stack Overflow community, I'm a designer, Just started studying HTML and CSS. I'm working on implementing a specific design for a webpage, and I'm encountering an issue with the SVG waves not ...
Caíque B's user avatar
0 votes
0 answers
14 views

Converting styled.components to scss module

I've got a styled button that is used with the styled-components library. The problem is, when the site is built the styles are often not applied. We have been having this trouble frequently with the ...
Ethan Gamble's user avatar
0 votes
0 answers
16 views

Updating Angular from 12 to 13 causes sass errors when running npm start

I have an Angular app in which I need to update the version from 12.2.6 to 13.4.0. I've been following the Angular Update Guide here - https://update.angular.io/ After I run the command: ng update @...
Tim's user avatar
  • 457
0 votes
0 answers
14 views

Odoo - Adding Font Module

I need to add a custom font to the Odoo website editor, so I followed this tutorial I created the custom module, but when I started my local Odoo server (nginx) the navigator interface showed me this: ...
Ezert Aracksam's user avatar
0 votes
0 answers
9 views

::Deep with SASS + VS 2022 + Blazor = Only Allowed in filenames ending with .razor.css or cshtml.cs Warning

I am using sass with my blazor application and using "DartSassBuilder" so I have something like this Add.razor Add.razor.scss Add.razor.css Now in my "scss" file I have ::...
chobo2's user avatar
  • 83.7k
0 votes
0 answers
15 views

undeclared mixin when @import from node_modules with ~

I am using Visual Studio 2022. When I do something like @import '~@my-scoped/package/styles.scss'; @include package-mixin(); Visual Studio will tell me that package-mixin is an "undeclared ...
Brad's user avatar
  • 12k
0 votes
0 answers
13 views

Attempt to read property "id" on null error Laravel

register new user on VCard SaaS - Digital Business Card Builder SaaS v8.2 when i submit the form i got this error Attempt to read property "id" on null path => app/Http/Controllers/Auth/...
KoPack's user avatar
  • 1
-1 votes
1 answer
49 views

how do i make this into a dropdown menu using html, css and scss

I am trying to make a dropdown menu using html, css and scss. help would be appreciated. <nav> <div class="nav-container"> <div class="nav-logo"> <...
RyaanKn's user avatar
0 votes
1 answer
41 views

infinite slider components just loop once then stops

I'm trying to implement an infinite slider which should loop forever with no need for buttons to move to the next or the previous, instead, the user can move or pause the slider using touch (this part ...
Marya's user avatar
  • 81
0 votes
0 answers
7 views

How to inject and load all sass files on ssr in next.js?

This is my first Question on this Platform and I really need your HELP! The Problem is FOUC in [email protected] i need to minify and extract all my sass files to render on Server to avoid FOUC error I ...
mhdizmn's user avatar
0 votes
0 answers
36 views

Close icon doesnt't change in hamburger menu on mobile devices

I'm trying to fix some strange issue which appears on mobile devices. The problem is that when the user select link from the dropdown menu the close icon stucks and doesn't change with the hamburger ...
Santiya's user avatar
  • 11
-3 votes
0 answers
22 views

npm don't see any files (only html working) [closed]

npm не видит файлы. при этом только на github pages а на локальном компьютере все хорошо. с netlify такая же фигня. index.html, sass лежат по пути ./src/index.html, ./src/sass/index.scss картинки не ...
Юрій Цапій's user avatar
0 votes
2 answers
53 views

How to color odd columns of an empty css grid?

Let's say I have a simple html CSS script: <!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); grid-template-...
Matan's user avatar
  • 93
0 votes
0 answers
40 views

Vertical Dropdown menu with jQuery or Javascript [duplicate]

I'm trying to create a drop down menu using ul and li a. My actual problem is, When I click on a li a, the previous li a will be closed How can we use jQuery or JavaScript to close the previous drop-...
radman's user avatar
  • 11
-1 votes
0 answers
18 views

Make light or dark theme/mode in Nextjs application using SCSS [closed]

I was trying to create dynamic color variables according to light or dark theme/mode Tech Stack Next.js SCSS // light mode colors $light-mode: ( 50: #f5f5f5, ); // light mode colors $dark-...
Dinesh Basnet's user avatar
0 votes
1 answer
29 views

My html tag aside will not go into my "aside" part of my grid

I am having trouble with grids. I set the boundaries and everything goes into the grid correctly, besides my aside, which i want on the right of my screen. As a side note, this is using SASS. I also ...
PinetatoRaptor's user avatar
0 votes
1 answer
39 views

Maintaining Aspect Ratio of an Image in a Div with 'Overflow: Hidden' Property

I am currently developing a profile page inspired by the layout of Facebook's profile section, specifically the combination of the banner and profile image. My implementation works well on desktop ...
Serban Marin-Eusebiu's user avatar
0 votes
0 answers
22 views

What does sass skip the tokenization process step while parsing mean?

In the sass documentation, it says "A Sass stylesheet is parsed from a sequence of Unicode code points. It’s parsed directly, without first being converted to a token stream." What does this ...
Tomas 's user avatar
  • 11
2 votes
1 answer
60 views

Nuxt 3 + SASS: Can't use include paths with @import and @use

I am currently making a web application in Nuxt 3.8.1 and I use the SASS preprocessor for my stylesheets. However, the import directives don't seem to be working correctly. I have a file watcher ...
Endermanch's user avatar
-1 votes
1 answer
32 views

Why won't CSS properties and media queries work on certain elements

I am trying to build a portfolio page with React and using SCSS to style. I am not completely new to these libraries as I have been using them both for a while now. Recently, I have encountered some ...
Chidera Lilian's user avatar
0 votes
2 answers
29 views

How to switch SCSS format when copying with eCSStractor?

I do not know how to disable SCSS class format for now. I want to switch from this : .header { &__row {} &__logo {} &__nav {} } to this : .header__row { } I tried to look in ...
Mary A.'s user avatar
1 vote
1 answer
31 views

SCSS syntax for list and map

I'm trying to run the following code in Angular v16. @use "sass:map"; @use "sass:list"; list.append(10px 20px, 30px); // ERROR expectedscss(css-lcurlyexpected) @debug list.append(...
Georgian Stan's user avatar
-1 votes
0 answers
20 views

css written for my category section using sass is not showing on web nor throwing any error what to do [closed]

the css writtenin my reactjs application this is category.scss file for category section is not showing in my web browser, nor its showing any error . and if you inspectin web the code is showing ...
dhruva's user avatar
  • 1
0 votes
0 answers
24 views

Overwriting template Scss variables

I'm using a css template that I bought recently. This template is provided with scss files. I would like to change the value of a variable in the _vars.scss file. I was told that it's good practice to ...
Edwin ZAP's user avatar
  • 421
0 votes
1 answer
47 views

I want to achieve half border on right side of div as shown in image

I want to achive as shown below in comps image link. Comps Image My html structure is something like this <div class="module-box carilion-proud-logo-section"> <div class="...
Rajdatta Sarwade's user avatar
0 votes
0 answers
28 views

Not able to use tailwind css classes in an existing angular project which is using scss

I'm trying to use tailwind css classes in an existing angular project which is using scss. I'm new to angular, tailwind and sass so help would be greatly appreciated. I tried these guides but they did ...
Anagh Pranshu's user avatar
0 votes
3 answers
50 views

Why are the distances different?

I have these codes in SCSS and HTML (Astro) <header class="mainHeader"> <a href="/"><img src="/images/mainLogo.png" alt="Логотип " id=&...
jeany's user avatar
  • 1
1 vote
2 answers
77 views

How to position a SVG icon inside switch button?

I have a switch component and I need to place an SVG icon inside the switch ball. The problem is that I'm not able to position this SVG. It is being hidden behind the circle, and when I switch between ...
Katyellen's user avatar
  • 271
0 votes
0 answers
19 views

Change scroll-y in element main inside a #shadow-root (open) in Ionic

I would change the css of the class scroll-y on the element main inside a #shadow-root (open) I tried with: ion-content[part="scroll"] { overflow-y: none !important; } ::ng-deep ion-...
Roberto Valenza's user avatar
0 votes
1 answer
35 views

Inconsistent CSS behavior with Nuxt 3

I have encountered a very strange behavior with my CSS. When I initially load a page (or when I refresh) no CSS is applied. However, I noticed that if I make a change to the style tag, For example add ...
Боян Дечев's user avatar
0 votes
0 answers
92 views

Angular 17 tailwindcss sass-loader

After updating to Angular 17 an error with styles occurred: ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): $color: theme("colors.primary.600") ...
Sergey Dudik's user avatar
0 votes
0 answers
11 views

Does Storybook now load Angular styles.scss automatically?

In previous versions of Storybook if we wanted the stories to render with the Angular SASS in styles.scss included we had to add this import to preview.ts: import '!style-loader!css-loader!sass-loader!...
Ole's user avatar
  • 42.8k
0 votes
0 answers
54 views

light theme to dark theme

Im trying to use a icon to change the theme of my layout from a light theme to a dark theme using themeContext, useState but its not working for some reason. I checked it earlier by going to my scss ...
FarCabana's user avatar
0 votes
0 answers
4 views

Next.js config is not loading sass files correctly from bootstrap version 5

Experiencing an issue during the migration from Bootstrap version 4 to version 5. I'm receiving a warning about an invalid object in my next.config.js file, resulting in errors while loading Sass ...
Ali Alhaddad's user avatar
2 votes
2 answers
66 views

How do I place an element relatively to an image using background-image and ::before/::after?

I'd like to position an element (using ::before/::after) relative to an image (using background-image), but it doesn't seem to work. If I add position: absolute to &--right::after will the &--...
wuwu's user avatar
  • 21
0 votes
0 answers
26 views

Scss create a variable from another variable and a string

I'm sure I'm close to my final result but for the moment, can't find out, so I ask here ! I try to make a better version of my mixin to facilitate the usage of typography in my design system, so that ...
Ciloow's user avatar
  • 13
1 vote
0 answers
49 views

Getting error while upgrading my reactjs project with node version 18

I am unable to update my ReactJS project from v16 to v18 and also facing this gyp error when I try to upgrade, I tried sass instead of node-sass. SyntaxError: EOL while scanning string literal gyp ERR!...
Nikhil Gowda's user avatar
1 vote
0 answers
11 views

How do I combine three bulma css classes into one using less or any other option?

I have the following bulma classes to be applied one div "box", "has-text-weight-semibold", "has-text-link-dark", "has-background-primary-light" How do I ...
moorsu's user avatar
  • 263
1 vote
1 answer
40 views

Background-gradient doesn't follow the scrollbar when adding it to the bottom of the div

I'm trying to add a white fade to the bottom of a and seems to work fine at first glance. But when I scroll down I can see this fade isn't at the bottom anymore. Does anyone know why this could ...
Michael's user avatar
  • 89
0 votes
1 answer
24 views

SvelteKit, SCSS and Vite: Error: Undefined variable, Error: Undefined variable

After setting up a new SvelteKit project, adding the vitePreprocess preprocessor to svelte.config.js and adding the SCSS variable file path to preprocessorOptions in vite.config.js. This works and I ...
devshly's user avatar
  • 21
0 votes
0 answers
32 views

Angular/SCSS build appending path to inline SVGs

I'm building a project using Angular 15 with SCSS styles. I have package pulling in SCSS files that I intend to import into this application. It has some inline SVGs in the SCSS I'm pulling where the ...
Steve Schrab's user avatar
0 votes
0 answers
29 views

Shiny app with bslib in docker container loads .css and .js files only after refresh of page

I have a shiny app hosted in a docker container. When I access the app (or force refresh the browser window), the stylesheets are not loaded and I see multiple errors in the console (see below). This ...
Alex's user avatar
  • 1
0 votes
1 answer
64 views

How to move an element without affecting the border in css [closed]

current situation: I want to make the borders to have same length even but keep the indention on each nested level like this: This is my current code: <template> <div class="directory-...
Ezekiel's user avatar
0 votes
0 answers
27 views

ReferenceError: globalThis is not defined for app.scss

While running my React project on an Azure pipeline, I encounter an error specifically during the 'npm build:prod' phase. The process works seamlessly on my local environment, but on Azure, it crashes ...
Oscar123123's user avatar
-2 votes
0 answers
23 views

why is the image not next to the h1? on the right

why is the image not next to the h1? on the right it should be next to the h1 but idk why it is not there please someone help <div class="info-first"> <div class="inside-...
SaBs's user avatar
  • 1
0 votes
0 answers
10 views

Sass 7-1 architecture global mixins

I have my stylesheets set up with the sass 7-1 pattern, and I've eschewed @import in favour of @use and @forward. I want to avoid using '../..' relative directory pointers, by having a global ...
Anita Graham's user avatar
3 votes
0 answers
68 views

Weird issue happening with recaptcha on mobile web view (Updated in more detail)

I know styling for recaptcha is very restricted to prevent users from affecting its purpose, but my recaptcha has an issue. So I have the recaptcha widget in my web which looks like this: But when I ...
Calvin Lin's user avatar

1
2 3 4 5
549