I have a simple Angular (13) application with Material.
I've created a CSS file that is meant for overriding some of the Material styles, and imported it into styles.scss. This import is the last line of this file.
Yet, none of the CSS definitions in the external file seem to actually override the existing styles from Material.
When I place these definitions directly in styles.scss, they work.
What is the difference between importing CSS definitions from a file and placing them directly, in this case? Am I missing something here?
To import css to an scss file, you should import it without the extension like this.
#import "path/to/file/file_name_without_extension"
If you import that with extension
#import "path/to/file/file_name.css"
it won't work as it gets translated to
#import url(path/to/file/file_name.css);
Merged PR from SASS repo: Implement raw css imports
Related
I'm building a website with gatsby and I have set up the gatsby scss plugin. Everything seemed to be working fine until I realized my styles from home.module.scss were also being applied to my navigation component that only imports navbar.module.scss.
I have a style for my buttons in each of these modules that looks like this...
button {
// different styles in the different modules
}
Both of these modules import a global scss file at the top like this...
#import '../styles/global.scss';
The react components only import their respective modules. In my main index component I import global styles like this import './global.scss'
Am I misunderstanding how scss modules work in React or is this is a bug?
from my understanding
In react importing SCSS or CSS in any component will be global.
So it will affect all other components as similar to the component where you imported the SCSS file.
use different class names
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I'm trying to import my css/sass files in order. Somehow my css gets messed up as my bulma framework imports, overwrites all classes coming later.
require("./index.scss");
in my index.scss i Import bulma (framerwork) first and after this an entryPoint.scss which imports other sass/css files from the assets directory.
#import '~bulma/bulma';
#import 'app/assets/sass/entryPoint.scss';
and my entryPoint.scss
#import "helper/_helper.scss";
#import "helper/_spacing.scss";
#import "global/global.scss";
Somehow later imported classes are overwritten my the main classes imported by bulma in my index.scss. All classes in "helper" are overwritten by the main classes in the bulma framework.
Any ideas? I'm using the create-react-app npm script.
What classes are being overriden? My hunch is that you are trying to compete with Bulma classes that are marked with the important rule. If you intend to override these classes in a later file, you will likewise have to mark them as !important. That being sad, I would avoid throwing around the important rule unless absolutely necessary as it is easy to misuse.
In your case, I would try the following:
index.scss
#import "../node_modules/bulma/bulma";
#import "./helpers";
helpers.scss
.is-marginless {
margin: 3em !important;
}
I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I #import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button and friends). This leads to long SCSS compile times and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times.
To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss, then foundation_and_overrides import globals). Importing just the globals.scss file gets rid of duplication only in files that don't make use of Foundation mixins.
It's in the files which make use of Foundation mixins: Can I import only the mixins from an SCSS file, without importing the concrete Foundation styles?
Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.
When you import foundation via #import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. #import 'foundation/components/side-nav' for only the side-nav file).
I had similar issue, where I wanted to simply use a variable from another file, without import of all CSS.
The #use keyword of newer Sass-versions can be used to ensure CSS is not emitted more than once.
The down-sides are:
Only "Dart Sass" supports compiling it (at least, at time of writting).
#use rules must be written before any other rules.
Last but not least, we can not simply replace #import with #use, and need to prefix scope, like:
#use '../my-module';
body {
background-color: my-module.$my-variable;
}
Warning: #extends keyword(s) can not have my-module. prefix, because extensions are not scoped at all (at least, at time of writting).
All I need is to do is have a directory with my custom reset sheets and other sass files for imports.
I've been playing around and I can't get compass to read my custom sheets.
1) Where do I put my custom css sheets for import?
2) how do I #import them
(I'm using the sass indentation, but I doubt that makes a difference,)
(I know little about ruby I'm just using it for compass)
Thanks
Look at the #import section in Sass reference.
You can import a Sass file without telling explicitly the file extension:
#import "file"; /*will import file.scss or file.sass. Anyway you could as well use #import "file.scss" or #import "file.sass*/
To import a CSS, provide its extension.
#import "file.css"; /*will import file.css"
There are more ways to differentiate them in the reference, but these are the most used.
You can put your files where you want, but write the path relative to the current directory (the directory which the file from where you are importing is).