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?
Related
So, I have scss file with global styles. This file seems like that:
#import "colors";
#import "border-radius";
#import "box-shadow";
#import "paddings";
#import "margins";
#import "fonts-famalies";
#import "font-sizes";
#import "transition-durations";
#import "global-path";
#import "mixins";
#import "mixins-properties";
#import "../design/animations/fade-animation";
::v-global(*), ::v-global(*::before), ::v-global(*::after) {
box-sizing: border-box;
outline-color: var(--color-outline__global);
transition: background-color 0.2s linear;
}
::v-global(html), ::v-global(body), ::v-global(#application) {
font-family: var(--font-famaly__comfortaa);
background-color: var(--color-background__global);
color: var(--color-font__content);
margin: 0;
font-size: 95%;
height: 100vh;
overflow-wrap: anywhere;
}
v:global(a) {
color: var(--color-font__link);
}
Styles imports using vue.config.js with this configuration:
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/styles/global/global.scss";
`
}
}
}
})
All good, but when I open developer console in chrome I see picture like that.
When I checked header tag in HTML I see a lot of same css imports. If I comment all css styles - header have a lot of styles still. What am I doing wrong? I think that problem in loader
If you're going to be adding a global import (for example for shared SCSS variables and mixins), don't put ANY global styles in that import.
scss-loader's additionalData modifies each scss file it loads with the given string template. As a result, you're putting an import with your global style definitions at the start of every component's style block.
To fix this, move all your v-global(html) styles and the animations to a different file, which you import once in your index.html or App.vue. Ensure that the file you want to automatically import in your components only contains code that does not generate any styles by themselves (so scss variables, mixins, functions, etc. are fine). It's common that you name this file 'variables.scss' or similar, so no style definitions accidentally end up in this file or its dependencies.
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
I installed zurb-foundation using npm and tries to import the .scss of the former to my App.scss file. I'm using the "live sass server" for the compilation of the .scss code to .css code. While the .css file gets created but it shows no code even though I imported the .scss from foundation to my App.scss
pic shows the .scss code on the left and corresponding .css code on the right
if you have three file:
SASS SYNTAX
first file:
SASS SYNTAX
// foundation/_code.sass
code
padding: .25em
line-height: 0
second file:
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
you can add your files with import like this.
note: the name of file have to have this syntax:
_{name of file}.sass
// app.sass
#import foundation/code, foundation/lists
SCSS SYNTAX
first file:
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
second file:
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
third file:
// style.scss
#import 'foundation/code', 'foundation/lists';
for more info study: sass docs #import
have you also tried #import '../node_modules/foundation-sites/scss/foundation.scss'?
But maybe you could just pick what you really need to use, for instance the breakpoint mixins for your scss, like:
#import "~foundation-sites/scss/util/util";
#import "~foundation-sites/scss/util/breakpoint";
otherwise the whole foundation code will be compiled to your css file, maybe you don't need everything.
You can also have a look at https://get.foundation/sites/docs/sass.html
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
I'm trying to use Foundation 5's new media queries. I created a foundation_overrides.scss file and added a link to its css file below the link to my app.css file in index.html head tag:
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-overrides.css" />
...here's app.scss:
#import "settings";
#import "foundation";
...and foundation-overrides.scss:
#media #{$small-up} {
body {background: red;}
}
#media #{$medium-up} {
body {background: orange;}
}
#media #{$large-up} {
body {background: yellow;}
}
#media #{$xlarge-up} {
body {background: green;}
}
#media #{$xxlarge-up} {
body {background: blue;}
}
Unfortunately this returns the following Sass error:
Syntax error: Undefined variable: "$small-up"
I've also tried uncommenting the #import "foundation/functions"; line from _settings.scss yet the error persists.
What do I need to change to use these media queries?
The reason its failing is because it can't find $small-up variable, or it doesn't exist. Also it will fail if the variable is defined after the media queries.
Try the following:
Make sure you are loading _settings.scss before your media
queries.
Make sure _settings.scss is properly imported: put a .test {} class in _settings.scss and see if it is in your generated css.
In _settings.scss make sure the variables are uncommented: for example uncomment this // $small-up: $screen;
Basically your sass should be in this order:
$small-up: $screen !default;
#media #{$small-up} { }
http://foundation.zurb.com/docs/media-queries.html
You've probably solved this by now but no answer as to what was the final cause of the issue was posted. First thing i would check is if you're sass is compiling to the correct css directory in your case 'stylesheets'. Also from your example you're clearly making an error in the name of your file. In your header you have foundation-overrides.css but your sass file is "foundation_overrides.scss". What seems most likely is that you need to change your hyphen to an underscore in your link rel name.