I have a css file that contains the main styles of the program and is used in all components for example:
.f-l {float: left};
.m-r-0 {margin-right: 20px}
....
And I addressed this style file in the angular.json file
"styles": [
"src/assets/styles.css"
],
After running the program, the style file is loaded on top of all style components
But due to the priority of the styles.css file, I want the last file to be loaded
What should I do?
Thank you for your help
Related
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 added all files for template I should use in my Nuxt app (css, js, images etc.) into assets/theme folder. There is assets folder structure:
Inside assets/theme/sass/layout/_menu.scss I have this line:
background-image: url('../../css/images/close.svg');
Inside assets/theme/sass/layout/_main.scss I have this line:
#include vendor('background-image', (
'linear-gradient(to top, #{$overlay}, #{$overlay})',
'url("../../images/banner.jpg")',
It is correct path to svg file (also autocomplete works fine) but when I run app, I get error:
These relative modules were not found:
* ../../css/images/close.svg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
* ../../images/banner.jpg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
In assets/scss/ I have main.scss file that is my global file to import all other css, scss etc:
#import '../theme/css/main.css';
#import '../theme/sass/main';
Does anyone know what is the problem?
According to the offical documentation:
Inside your css files, if you need to reference your assets
directory, use ~assets/your_image.png(without a slash)
In your case i presume this will work:
background-image: url(~assets/theme/css/images/close.svg);
https://nuxtjs.org/docs/2.x/directory-structure/assets#images
did you solved it?
this works for me:
1. I added #nuxtjs/style-resources dependency to project
2. This is part of my nuxt.config.js:
css: ['~assets/css/styles.less'],
modules: [
['#nuxtjs/style-resources'],
],
styleResources: {
less: './assets/css/modules/*.less'
},
I have edit the angular.json styleext for using less
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "less"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
I create a component and test the less it works. But now i want to mix the component css/less with the bootgstrap classes.
For example I want all button in my component to have .mx-1
I type in my less:
.btnmx-1{
.btn();
.mx-1();
}
but it failed. I tried to import :
#import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
.btnmx-1{
.btn();
.mx-1();
}
this one also failed to compile with error : .btn is undefined
How to fix this ? I want all buttons in my component to have margin left and right 1px inherited from bootstrap
For Bootsrap:
npm install bootsrap --save
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
For less:
add less file type instead css (by default)
comp.component.less
in angular.json.
Set the property defaults.styleExt to less.
Here's how I use bootstrap in my project
Download bootstrap Source files from link: https://getbootstrap.com/docs/4.0/getting-started/download/
create styles folders in your project copy scss folder from resource to it and rename it to bootstrap to more clearly
create your own mixin and import it bootstrap.scss file(below all of the existing imports)
import bootstrap.scss to style.scss(or in angular.json)
In my case, I just want to use bootstrap utils classes like padding, margin,heading...so I just keep these files in my boostrap scss folder
If you need all just keep all or remove some modules that need bootstrap js to run like carousel....
In Angular 2, I have a CSS class in my styles.scss file:
.FirstClass {
}
I'm trying to extend this class in a component's .SCSS file (eg.: MyComponent.scss) like:
.SecondClass {
#extend .FirstClass;
}
I'm getting an error that says .FirstClass is not found. Do I assume correctly that class and style in styles.scss can be globally referred? Please help me in this.
If you have any file, and you want to use one of its classes in another file, you have to import it first.
styles.scss
.FirstClass{}
MyComponent.scss
#import 'styles.scss'
.SecondClass{
#extend .FirstClass;
}
SCSS is compile to CSS, hence, if you need to make any changes in the file itself that not related plain css, you have to take it into consideration.
I use Magento Blank as a parent theme.
I have created _theme.less.css in /app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/source/ that contains this code:
#button-primary__background: #color-orange-red1;
#button-primary__hover__background: #color-orange-red4;
#button-primary__border: 1px solid #color-orange-red2;
#button-primary__hover__border: 1px solid #color-orange-red2;
I have flushed cache.
But buttons are still blue.
What am I doing wrong?
This code needs to go into a .less file and be compiled into a .css file as this isn't code styles that can be read natively in a css file.
First add your custom css
Go to:
/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/layout/default_head_blocks.xml
And add css under head block looks like this:
<head><css src="css/custom.css" /></head>
And than after create custom.css file in this path:
/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/web/css/custom.css
Run your css, hopefully it's work for you.
All you had to do was to copy files from:
/vendor/magento/theme-frontend-blank/web/css/
Into theme directory:
/app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/
You don't have to move all files, you can just replace the files you want to make changes to.
I think you have to learn LESS to be able to style the theme properly. But for simple static CSS changes this might work:
1) Add /dev1/vendor/magento/theme-frontend-blank/web/css/_styles.less with the following content:
#import 'source/lib/_lib.less'; // Global lib
#import 'source/_sources.less'; // Theme styles
#import 'source/_components.less'; // Components styles (modal/sliding panel)
body{background:#f00}