shared.scss:
.gridContainer {
display: grid;
background-color: #efefef;
}
my-component.scss
#import url("../../../shared.scss");
.contentWrapper {
#extend .gridContainer
}
When extending to .gridContainer from angular component scss(my-component.scss) I'm getting this error. The import is fine here.
Is it possible to extend like this? If not how to access the class or variable from the shared.scss?
ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use #extend .gridContainer !optional to avoid this error.`
I don't think the import statement is correct. Try #import 'shared.scss'
Similar issue to https://stackoverflow.com/a/51480665/271012
Related
In my layout.scss I have the following code:
#media(max-width:1100px) {
#wrap-nav .nav {#extends .block;} # Comes from generic scss file
}
in my main styles.scss I import that file, it looks like this:
#import "layout.scss";
#wrap-nav .nav {display:flex;}
I have no idea why but with a 1920px width I still see SCSS compiling this as
#wrap-nav .nav {
display: block;
}
but it shouldn't be compiled without the media query, should it? Am I missing something here?
I have a variable file that has two definitions of themes I want to overwrite:
_vars.scss
body {
$bg-color: #fff
}
body.theme-dark {
$bg-color: #333
}
I´m calling the variables in my Angular button component:
button.scss
#import '_vars.scss';
.button {
background-color: $bg-color;
}
But I´m getting the following compiling error:
SassError: Undefined variable.
background-color: $bg-color;
Whats is the right way to overwrite variables depending on my body theme class?
Thanks
You define $bg-color depending on the theme, but never $font-size-18.
On a side note, I would consider to use CSS Custom Properties instead of SASS variables if I was in your shoes. Codyhouse have an interesting and easy to understand article about this, which also talks about color themes.
If you want to dig deeper into this topic you may want to read this article.
First of all variables inside scope valid only in that scope not universally. Now for your question see below :-
_vars.scss
Instead of making variables inside body scope create it in global scope.
$bg-color: #fff;
body {
background-color: $bg-color;
}
and then import it in your button.scss without underscore "_"
#use "vars" as *;
button {
background-color: $bg-color;
}
In my angular 11 app I am trying to globally use css variables to declare global colors.
In my styles.scss I have:
:root{
--primary : #0b68e8;
--secondary:#ABCFFF;
}
.test-class{
background: var(--primary);
}
When I am applying that class in one of mine components I can see that var was not properly taken from declared variables:
I tried to find any solution , but cant resolve it. Do you maybe know what is wrong here?
try
.test-class{
background: #{var(--primary)};
}
BTW, if you're using sccs, why not use sass variables?
$primary: #0b68e8;
.test-class{
background: $primary;
}
I am learning Sass over here and would like to get support in understanding why does this prefixing attribute not working when referencing variables when forwarding scss files.
I am using dart-sass with react.js taking the advantage of package-aliasing over node-sass so I can use #use, etc.
I cannot use this on codesandbox in order to replicate the issue, so I will post the code down here:
At src/library I have 2 partial scss files and one index.scss file to #forward my stuff:
_variables.scss
$color: darkgreen;
_mixins.scss
#mixin box-structure {
width: 50vw;
height: 50vw;
background-color: yellow;
margin: 0;
}
index.scss
#forward 'mixins' as mix-*;
#forward 'variables' as var-*;
the index.scss file is imported to a dummy react component, just to play around with the features and understand how things work.
Here is the Child1.js file and subsequently the Child1.scss file:
Child1.js
import React from 'react';
import './Child1.scss'
export default function Child1(props) {
return (
<div className="Child1">
<h2>Child 1 Title</h2>
</div>
)
}
Child1.scss
#use '../library/index.scss' as i;
#function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
#return mix($inverse, $color, $amount);
}
$primary-color: #036;
.Child1 {
#include i.mix-box-structure; //this works as intended
background-color: invert($primary-color);
h2 {
color: i.var-$color; //here is where the error occurs
}
}
As demonstrated above, I import index.scss as i and apply it on two places in Child1.scss:
When I use it to apply a mixin it works just fine, but when I try to apply the prefix to use a variable I get the following error:
SassError: expected "(".
╷
14 │ color: i.var-$color;
│ ^
I guess it is not accepting the $ after the dash. I tried placing the variable using string-interpolation with no success. Would it be a react.js issue?
Thanks in advance!!
I think the Problem is the application of the forwarding prefix. you need to add it after the $ like:
color: i.$var-color
It looks weird but if i remember correctly thats how forwarding prefixes work in sass.
I am using css modules, however a library I use in a component to append tweets with JavaScript adds some elements to my component in the following structure:
<div class='user'></div>
<div class='tweet'></div>
I want to now style these elements in my css module for the component, as follows:
MyComponent.css
.user {
/* styles */
}
.tweet {
/* styles */
}
However of course now my .user class changes to .MyComponent__user___HZWfM due to the hash naming in the webpack loader.
How can I set a global style in my css module?
According to the css modules docs, :global switches to the global scope for the current selector. e.g.
:global(.example-classname)
So this should work:
:global(.tweet) {
text-align: left;
}
:global(.user) {
text-align: left;
}
Or define a global block
:global {
.tweet {
text-align: left;
}
.user {
text-align: left;
}
}
Can use module class with static class with this way.
myStyle.module.css
.moduleClass_g1m59k:global(.StaticClass) {
background-color: orange;
}
Output will generate like this
.moduleClass_g1m59k.StaticClass {
background-color: orange;
}
Many people have struggled with this and there doesn't seem to be any one agreed upon solution. The one I have settled with involves some tweaking of your bundler and specifically addresses the need to import libraries as-is without having to wrap them or edit them manually.
In my webpack config I have set it to scan all files ending css except those within the 'node_modules' and 'src/static' folders. I import my libraries from here and they dont suffer the classname transforms so I am free to use regular classnames for global css and the className={styles.element} convention as usual for modular css (which will compile down to .component_element__1a2b3 or something similar).
Here is an example of a working production webpack config with this solution:
http://pastebin.com/w56FeDQA