Menu
I am using the newest version of Angular-CLI to create an Angular2 project. I have a sass file with variables in src/assets/styles/_vars.scss. Is it possible to configure the sass compiler so I only have to write
@import "vars";
Instead of writing out the full path or relative path?
917
The Angular CLI can help you stylev12 introduced the option to use inline Sass in your Angular components. The CLI now has an option to provide a inlineStyleLanguage and compiles Sass directly from your Angular components into styling.
Make sure you set scss as the default style format in your angular. json file like so: "schematics": { "@schematics/angular:component": { "style": "scss" }, Now when you generate a component, a scss file should be created.
With the help of Angular CLI, you can install CSS or SCSS on your project and start working on that in a suitable way. If you are working with the CSS or SCSS in your angular project then it is very easy for you as compared to most other frameworks.
SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.
Import regular CSS file in SCSS file? 290 SASS - use variables across multiple files 1018 Angular HTML binding 350 Angular CLI SASS options 256 What are the "spec.ts" files generated by Angular CLI for?
In other projects, you may be used to having access to your Sass variables in all locations since your Sass is compiled by a task runner. 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.
In addition, angular component styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles. Angular Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use variables, nested rules, inline imports, and more.
To get the CLI to generate .scss files (or .sass / .less) is an easy matter. You can also set the --style flag with the following: If you’ve already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over.
You're in luck. See this pr.
As an example when using sass, you'd be looking to add a stylePreprocessorOptions object to your app config within angular-cli.json. For example:
"apps": [
{
"stylePreprocessorOptions": {
"includePaths": [
"styles" // This would point to the `my-app/src/styles` directory
]
}
}
]
From here, if you had a scss file such as my-app/src/styles/_vars.scss, you can then
@import 'vars'
across your apps scss files.
Just remember to update angular-cli to at least 1.0.0-beta.26.
167
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
