Category "sass"

How do I remove unused CSS when using Django, Sass and a frontend framework?

I am using a SCSS-based frontend framework (namely cirrus-ui) with my Django project. For compiling the CSS stylesheet with Sass, I use webpack to compile the s

ISO proper way to chain Webpack via vue.config.js to add global .scss imports to my .vue files (vue-cli-plugin-nativescript-vue)

I have Vue.js project I've setup previously that dynamically adds defined .scss files to my .vue template files, so I can access my variables, mixins, etc. in t

Bootstrap 5 grid, how to customize the grid gutters at different breakpoints (not using utility classes)?

How can I customize Bootstrap 5 to have different grid gutters at different breakpoints? I don't want to use the grid spacing utility classes because those wou

How to use sass global variables from other components in vite/vue3

I want to use and change global variables from other components, my files structure looks like this... enter image description here I have my variables in globa

SassError: The target selector was not found

After upgrade to bootstrap 5.x, the node version is v16.13.2, the webpack version is "webpack": "^4.36.0", the sass-loader version "sass-loader": "^9.0.0". when

Tailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13

I'm unable to get Tailwindcss classes to appear on the inline "class" attribute. But if I @apply I through the ".scss" file and use that class on the inline "cl

Compiling watch SCSS Many-to-One CSS

I'm trying to find a way to compile my multiple scss files into one css file. scripts are in package.json using node-sass The best I've found for the moment

Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0

I'm using Node.js 16.13.1 and created a React application and try used Sass, but when I try to run it, I get this error: Node Sass version 7.0.0 is incompatibl

Can I use @extend (SASS) method to a nested class and get the output without parent class?

HTML <div class="main"> <div class="first"></div> </div> <div class="second"></div> SASS .main background: #eee

Button with transparent background and rotating gradient border

What I'm trying to achieve is a button like Once it's done I need to animate on hover. The closest example I could find is this codepen https://codepen.io/Ches

Laravel 8 - problem with scss and npm run dev

Tried node versions: 12.20.1, 14.15.4, 15.6.0 When trying to compile the scss file I always get this error: npm run dev > @ dev /var/www/projects/eight >

Node Sass setup

I am trying to set up development for node-sass but I keep getting "6 packages are looking for funding" which affects anytime I run npm run sass, and I get back

Rendering Overlay Containers when theming Angular Material?

According to this tutorial we should be able to add the class needed to render the overlay container that backs Angular Material Select, Snackbar, etc. like thi

SCSS: Getting compilation error when using grid: repeat(auto-fit, minmax(260px, 1fr));

I have valid css grid rule .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px , 1fr)); } however, the scss compiler brings t

How can I set bootstrap-vue theme colors to css variables?

I'm using bootstrap-vue and would like to be able to override the theme colors dynamically at runtime (after compiling the scss). To do this I'm following this

How to convert these inline style in html into react?

Hi Inside the html people use these kind of styles to animate. I am actually following the pen from alphadex Link. I never see this kind of writing in HTML befo

Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)

I have tried to install gulp-sass latest version with npm i gulp-sass --save-dev in the begining I got a lot of errors but later solved them. But whenever I tr

Number of sibling elements in a calculation in SCSS

I'd like to customize an animation in SCSS based on how many sibling elements the animated element has. The full SCSS code is here for reference, however the re

sass merge selectors on ampersand

assuming I have an existing SASS rule like: [dir] .foo { background-image: ...; // ... some more } And I want to add specific behaviors for ltr / rtl lik

Sass is having hard time parsing a CSS RGB syntax

Just plugged in gulp-sass into an existing project, and I'm getting an error when I try to write an RGB syntax as follows: rgb(70 168 255 / 0.05) The log: [17