I have an angular (8.2.12) project that has a css file that defines a lot of styling variables, named _vars.scss and it is placed in the ClientApp\src\scss\ folder. Some variables defined in that file are as below:
// NAVBAR
$nav-font-color: black;
$nav-bg-color: white;
These styling variables are used by the nav-menu.component in the ClientApp\src\app\nav-menu\nav-menu.component.css via the #import statement as below:
#import '../../scss/_vars.scss';
There are two problems:
It complains about the comment // NAVBAR, saying it is invalid, so I have to remove those comment line from that file
None of the $nav-xxx variables are recognized in the nav-menu.component.css file, e.g.
.navbar { background: $nav-bg-color; <-- here it complains 'Property value expected', which means the value of that variable was not imported in correctly. }
Related
Currently I'm building a template that will be used by multiple people on different projects. So making this work instantly without changing things per project install is crutial.
For this instance I want to change the $spacer variable that is used for all the margings and paddings classes that Bootstrap offers. But I cant seem to figure out how to change the $spacer variable outside of the /node_modules. I have an own _variables.scss that creates variables for the theme but an !important or anything else wont work eventhough the custom _variables.scss is loaded later that the bootstrap from the node modules.
Is there a way to send a scss file to the node_modules file so it changes the variables from within? or is there a different way to overwrite a variable from the node modules?
I always work like this and no problem:
// File: my-bootstrap-and-styles.scss
// your overrides
$primary : #FEBC35;
// include bootstrap.scss
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add your additional custom code here
.my-primary-div {
background: $primary;
border: 1px solid black;
}
// also don't forget to take advantage
// of bootstrap's variables and mixins
#include media-breakpoint-down(md) {
.my-class {
overflow-y: auto;
}
}
I have a variable and gallery partial: _variables.scss, _gallery.scss
When I import the variables file, which contains only one line $primary: #e0291a;, it works in the main style.scss file, but not in the _gallery.scss file.
My project is only going to grow, but do I really need to import the variables file in every single subsequent partial file?
I'm using VSCode Live Sass Compiler. The variables work with a custom webpack/laravel mix script I've set up a few years back, but not with this extension.
Is there a way to streamline the variable import without adding the line in every single scss file?
style.scss (main file):
#use 'variables';
#use 'gallery';
_variables.scss:
$primary: #ffffff;
_gallery.scss:
#gallery {
background-color: $primary // <--- Throws error of undefined variable
}
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
In my Nuxt app I load all my SASS thus:
css: [
'~assets/scss/main.scss'
],
It works perfectly, except when I'm trying to use some SASS variable from within a component.
<style lang="scss">
.container {
background-color: $white;
}
</style>
In this case I get this error message:
SassError: Undefinied variable: $white
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
It is as if the app as a whole knew these files, but each individual component doesn't.
What's going on?
Most of the other answers don't take into account that Nuxt.js hides all the Webpack setup and forces you to do everything through nuxt.config.js.
My guess is that Webpack isn't compiling all the SCSS declarations together and therefore can't find the variable.
It's been a few months since I had this issue so things may have changed but here goes...
Make sure you have the correct Node packages installed (Nuxt DID NOT do this by default for me) npm i -D node-sass sass-loader
Add your CSS & SCSS files to the css: [] section of nuxt.config.js Order matters here so make sure things like variables are added before things that use them if you have separate files.
If you're using layouts (I think that's the default Nuxt setup) make sure that layouts/default.vue has a <style lang="sass"></style> block in it. If I remember correctly this can be empty but had to exist. I only have one layout but it may need to exist in all of them.
If all that seems like too much of a pain, there's a Nuxt Plugin that takes most of the work/management out of that process. Nuxt Style Resources Module
The confusing part is that:
styles from scss files CAN be loaded like this
//nuxt.config.js
css: [
'~assets/scss/main.scss'
],
//global scss file
$varcolor: black
h1{background: $varcolor}
BUT
the variables inside CAN NOT be used inside a component
//inside component
.component {background: $varcolor} // DOES NOT WORK
I also suggest the use of the nuxt style resource module:
https://github.com/nuxt-community/style-resources-module
new founded solution, checked and it's work. Founded here
add #nuxtjs/style-resources
export default {
css: [
'vendor.min.css'
],
modules: [
'#nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/main.scss'] // here I use only main scss with globally styles (variables, base etc)
},
}
it's strange, but if u change tilda (~) to dot(.), it's help for someone
from css: [ '~assets/scss/main.scss' ] to css: [ './assets/scss/main.scss' ]
this solution finded here
Us should either load the scss in your component
<style lang="sass">
#import 'path/to/your/_variable.scss'; // Using this should get you the variables
.my-color {
color: $primary-color;
}
Or adding the following to you to your vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/pathto/variables.scss";`
}
}
}
};
Ref:
SassError: Undefinied variable: $white
Each <style lang="scss"> is compiled individually. You need to #import the file which defines $white into your component before the parser knows what $white means.
This is why most frameworks keep their variables in a _variables.scss file which is imported in all the other SCSS files/contexts.
The _variables.scss is not even loaded in the page, because in most cases it doesn't actually contain any rules. It only contains variable definitions which are imported into other .scss files, which output .css.
Ref:
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
If you import an SCSS file in your vue.config.js the output will be an ordinary <style> tag. Its contents will be generated at compile/build time and will result into some CSS (which apply to the entire document).
Unless specifically imported into the component SCSS, (using an #import command), the compiler will not know what $white means.
There is an important distinction to make between compilation context and browser context. Compilation happens at compile time (most likely in node-sass). Browser context is the actual browser, which only understands the CSS resulted from compilation.
How does Vue only apply style rules to the parent and not to the children with the same class? That's achieved by scoping.
It means applying a custom data-v-{key} attribute to all selectors in the generated <style> tag and to all elements the style should apply to.
See this example and inspect it using your web console: https://codesandbox.io/s/vue-template-ge2hb
It produces this markup:
As you can see, the scoped CSS has an extra [data-v-763db97b] added to the selector, which means it only applies to elements having that data attribute.
I am working on a project that involves different themes for each subpage. Each subpage has the exact same HTML markup as a frame, but on every subpage, the same elements - such as headings - must have different colors.
The way I am tackling this problem is to have every single declaration that differs on subpages in their corresponding CSS files, such as red.css or blue.css. These files contain only the color declarations of the selectors that must be different, so font-sizes and everything else is in the global CSS file.
What I am hoping to accomplish is to have the color variables declared in a file and create a SCSS frame for the theme CSS files that include the corresponding variables for the CSS declarations. In a more clear way:
Example of the variable declarations:
$red: red;
$blue: blue;
And the theme frame SCSS file should look something like this:
h1 {
color: $heading-color;
}
And the goal is to make SASS loop through the variables and create an X number of different CSS files that have the same frame, but each of them should have their corresponding values at the right places, so blue.css should have the blue values, red should have the red values, etc.
Is this possible to do? What I'm trying to avoid is to make X SCSS files with the exact frame in it, but with different values for their values, as this means X number of editing every time something changes.
With SASS you can import files which contain common CSS rules. Just create 2 files, each with different variables definition and include everything other from another scss file. Like this:
theme1.scss:
$primaryColor: red;
$secondaryColor: blue;
#import 'all';
theme2.scss:
$primaryColor: orange;
$secondaryColor: violet;
#import 'all';
_all.scss
/*All your CSS rules including for example:*/
h1 {
color: $primaryColor;
}
SASS will compile into 2 files theme1.css and theme2.css but there is no need to write duplicate CSS.