Menu
I'm starting my first project using Angular4 and sass and I'm trying to figure it out how to work with sass the proper way. I'm using angular-cli and already set the default style to use scss syntax. I also already defined the compilation, etc.
However I saw that we have an option styleUrls on the component, where in some cases we define styles used only in that component.
The problem is, when I set a scss file in that component it's not generating it's own .css file neither being included in the main .css file, generated from the root project.
So basically I have a project structure like this:
app
app.module.ts
app.routing.ts
home
home.component.ts
home.html
_home.scss
client
client.component.ts
client.html
_client.scss
scss
_imports.scss
colors
_colors.scss
ui
_button.scss
_table.scss
//.. more folder and files
styles.scss
index.html
And I'd like to be able to set the main css style within the styles.scss file, which will be inserted into the index.html file later, on the build process. But also be able to generate a single css file for each component I have, e.g. home and client, and only use those css styles within their own component.
Is it possible to do it? I've tried to do it and I didn't find any other resource about this!
703
In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables. scss file. One way to do this is to @import with a relative path from the component.
The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style ( css, scss, less ) file generation when adding components via angular-cli commands.
Angular Sass Example Well!! Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use things like variables, nested rules, inline imports, and more. It also supports you to keep things organized and enables you to create style sheets faster.
SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it. SCSS is full of advanced features. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.
You can specify scss when you create project.
ng new project-name --style scss
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
