Import regular CSS file in SCSS file?
Looks like this is unimplemented, as of the time of this writing:
https://github.com/sass/sass/issues/193
For libsass (C/C++ implementation), import works for *.css
the same way as for *.scss
files - just omit the extension:
@import "path/to/file";
This will import path/to/file.css
.
See this answer for further details.
See this answer for Ruby implementation (sass gem)
Scss module (css modules): importing from other scss files
css-modules is not related to SASS or SCSS and has its own set of supported features and keywords. Yes, they can be used together, which I actually do in most my projects. But I avoid having classname dependencies between different files. I'm aware of some features that could be used to share classnames, but avoiding the need for it is probably the best solution. I will in the following section list all potential solutions to your conundrum I can think of; choose what suits you best:
- Solution #1: Never sharing classnames, co-locating styles that belong together and operate on the same classnames.
In your case this would mean that you only have one scss file relating to buttonsbuttons.modules.scss
and bothButton.js
andButtonGroup.js
import it. - Solution #2: exempt shared classnames from the unique generated name mechanism by marking them as
:global
. This can be done thus:
// button.module.scss
// this will stay a global classname
:global(.button) {
// the button styles
}
// this will be treated as usual, generating a local name
.icon {
// some icon stuff
}
// buttongroup.module.scss
.buttonGroup {
display: flex;
// will be resolved as local classname
&.horizontal {
flex-direction: row;
// will be resolved as global classname
& > :global(.button):not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > :global(.button):not(:first-child) { margin-top: 1rem; }
}
}
- Solution #3: accept anonymous children. You can omit the classname of the children. no one places non-buttons in a button group (might even enforce it in your component code).
// buttongroup.module.scss
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > *:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > *:not(:first-child) { margin-top: 1rem; }
}
}
- Solution #4: Reference content from another file. There seems to be some support for a syntax that can reference/import stuff from other files, but I perused the documentation and a few github issue discussions 'import className from fileName' 'more' 'and more' without getting any clear answer as to how one would import a local classname from another file. There might be something possible either along those lines see here:
@import button from './button.module.scss';
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > .button:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > .button:not(:first-child) { margin-top: 1rem; }
}
}
...or along those lines see here:
:import("./button.module.scss") {
imported-button: button;
}
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > .imported-button:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > .imported-button:not(:first-child) { margin-top: 1rem; }
}
}
- Solution #5: Have your container component add a class
.button-group-item
to each child and use it to apply the margins instead of the.button
class.
While importing scss file into parent class css not working properly
This isn't an issue with angular nor with sass but rather with the component library you're using. Since they're using a lot of #{&}
's for scoping, your root selector (e.g. .mat
) will be re-used / duplicated and creates rules such as:
.mat .mat.e-btn { }
Notice the second .mat
which is created by a their #{&}.e-btn
selector.
Related Topics
How to Add Different CSS Style to Every Nth Element, Depending on N Using Less
Issues with "Background-Position" in "Background" Shorthand Property
Responsive Sprites/Percentages
Best Way to Represent 1/3Rd of 100% in CSS
Use Justify-Content: Flex-End and to Have Vertical Scrollbar
How to Have Different Colored Left and Top Borders in CSS with Straight Join
Bootstrap - Removing Padding or Margin When Screen Size Is Smaller
How to Apply Vendor Prefixes to Inline Styles in Reactjs
<Img /> VS Background-Image (Css) in Performance
Change Text Color to White on Any Non-White Background
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets
Failed to Decode Downloaded Font, Ots Parsing Error: Invalid Version Tag + Rails 4
Differencebetween Push and Offset Under the Grid System
How to Vertically Align Floating Divs to the Bottom
Linear-Gradient to Transparent Bug in Latest Safari
How to Align Spans or Divs Horizontally
CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)