I would like to add layers to importing component's scss files in my main style.scss in vscode.
I have a style.scss file in which I #import my app's component's _compstyle.scss files with, and my vscode generates the final style.css with watch sass. My question is that is it possible to add cascade layers to the import, or use cascade layers with scss at all? I tried to set layers in my style.scss's first row like this:
#layer reset, default, comp
My initial import row looks like this:
#import "./comp/compname/compstyle";
I tried to add layers to it like this:
#import "./comp/compname/compstyle" layer(comp);
My vscode does not recognize the #layer rule here. Is it possible at all to use layers with sccs, or does it have something similar, or something to replace it with?
I could not find anything on this topic so far, so every bit of help would be appreciated. Thanks in advance!
Related
Basically, I want to use the styles that the rsuite library provides because I wanted to use a ranged date picker that it has.
The thing is that, for it to display properly, I need to make an import of the .css of the library rsuit.
I have a component with a .scss file and an index.tsx file where I import the .scss one in this way:
import './styles.scss';
Then, in styles.scss I import the library .css this way:
#use '../../../styles/breakpoints'; //These are other .scss we use.
#use '../../../styles/fonts';
#use '../../../styles/colors';
#import '~rsuite/dist/rsuite.min.css';
My problem is that, when I do this, it overrides basically everything. Changing fonts, paddings... and yes, the range date picker now works and shows properly, but I only want it to change, nothing more.
Any way I can fix this? Or any way to select what I want to import from the library .css
You can scope the imported stylesheet by importing it inside a style rule...
#someRandomID{
#import '~rsuite/dist/rsuite.min.css';
}
This will make the whole CSS work only for elements inside element with ID "someRandomID", this way it won't overwrite your styles.
Now you that you have imported the styles and that they do not impact yours, it will also not style the datepicker! The trick here would be to #extend with your class. I did not dig into rsuite, so let's say the class for the datepicker is indeed .datepicker. This means that it got included as #someRandomID .datepicker and we'd like to "alias" this as .datepicker only.
You can use #extend for this:
.datepicket{
#extend #someRandomID .datepicker;
}
You may need to do that for every styles tough, so I'm not sure it's gonna be very helpful. It would also have the very bad drawback of including the whole CSS for absolutely nothing, bloating your css file by huge amounts needlessly.
With all that in mind, I think the best bet for you would be to simply get the source CSS that you need from their github. https://github.com/rsuite/rsuite/blob/main/src/DatePicker/styles/index.less
Global CSS variables
I have multiple CSS files in my project
I don't want to set the variables in each CSS file, but I would like to access them from every file.
You can import another CSS file from a CSS using:
#import "path/variables.css";
MSDN Documentation
You just need to create a globals.css file in there somewhere. Add your CSS Variables. #import that file into the others where needed.
I have a global CSS file that contains all generic CSS.
I want to be able to extend all the classes present in this global CSS file in any of my SCSS files.
Right now it throws an error .xyz class does not exist and build fails. I tried importing this file but still build fails.
Adding !options next to class is one way for the build to pass but is there any other better way?
Bit more context for Vue users. I use VueCli3. I use <style lang="scss"> for writing SCSS and want to use extend here. Vue documentation suggesting adding prependData for adding variables. I imported the global CSS in a SCSS file and imported that file in the prependData but Vue build still fails.
It sounds like you want to globally include a CSS file with content that the SCSS blocks in each component can read. (Variables, style definitions, etc).
#extend works like a variable, meaning SCSS needs the definition style to be available as part of its compilation. So that means getting "SCSS Global Variables" working should solve your Extend problem too.
In that case, you need to tweak how Webpack deals with your components. You can do it manually as described here. Or my preference is to use a Vue Cli plugin called vue-cli-plugin-sass-resources-loader. Make sure that your component <style> section contains lang="SCSS" though I assume you're already doing that.
Using #import CSS file into SCSS file not possible to #extend any class.
But you can follow below steps for extends class from your pure css code.
Convert .css file into .scss.
import that global.scss file into another .scss file.
Then after you can use #extend for extend class in new file.
If your file have more then 1k line of code then it will get trouble for extend class.
In order to use Angular style encapsulation for specific parts of the app I want to load with css-loader the styles from another file to another place with preserving the structure of the top-level file. In my .less file I have a code like this:
:host ::ng-deep {
#import '~ag-grid-community/dist/styles/ag-grid.css';
#import '~ag-grid-community/dist/styles/ag-theme-balham.css';
}
The point here is to use less syntax to add :host ::ng-deep prefix to every rule in the imported files. However the structure is not preserved, so it works as if the files were imported outside of the outer selector. eventually, after using require(css-loader!./myfile.less).toString() it works like this:
#import '~ag-grid-community/dist/styles/ag-grid.css';
#import '~ag-grid-community/dist/styles/ag-theme-balham.css';
:host ::ng-deep {
}
With imports replaced by their contents.
The current stack of loaders are css-loader, postcss-loader and less-loader.
Is there a way to keep the structure with the current loaders? If not, in your opinion, what is the best way of solving this problem?
I am using the latest Angular(4) with Angular CLI. I followed the advice found on SO for setting up global scss that is available to components.
Angular-CLI global scss vairables
My structure looks like this
/
styles.scss
/styles
variables.scss
mixins.scss
common.scss
/app
/component1
component1.scss
/component2
component2.scss
The main styles.scss file has the following code
#import './styles/variables.scss';
#import './styles/mixins.scss';
#import './styles/common.scss';
And in my components, I start each component scss file with the statement of
#import '~styles.scss';
I thought that this was the correct way to bring global variables/mixins/common into my component's scss. However, when I started to have components within components, I began to notice that Webpack was actually creating one block per component in the page, and each one of them had all of the global scss written out in them. So there would be one block for component1, with ALL of the variables,mixins,common stuff at the top, and then another block right below that one for the other component2 in the page, with all that information again.
Besides this being extremely inefficient, it means that the global styles are overwritting themselves (can see that in chrome debug) once for each time they are loaded.
Some direction would be very much appreciated.
The <style> tags are normal angular behaviour. Each components SCSS gets written into a <style> element, so there is nothing wrong with that.
The style.scss is for global styles that do not need encapsulation. It also gets written into a <style> element, if you imported it in your angular.json:
"styles": [
"styles.css"
],
What you are getting wrong is the question you linked (which is still not accepted).
You shouldn't import your already imported styles.scss (apart from variables or mixins) into your components, because this will lead to increasing bundle sizes, as you import the code over and over (which is also the reason for the GitHub issue you mentioned).
You can use the mixins, variables and common.scss simply by including them directly in your components SCSS, just as you need them.
This is basic sass behaviour, you should never import things that result in css several times (sass files imported into component should typically only contain variables, mixins and functions). If you need your import to happen only once, add it to the default styles file.
Look here