Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular-CLI Sass

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?

like image 917
Arkuni Avatar asked Jan 06 '17 11:01

Arkuni


People also ask

Can we use Sass in angular?

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.

How do I use SCSS in angular 14?

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.

Can I use CSS and SCSS in angular?

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.

Is Sass the same as SCSS?

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.

How many Sass files are available in the angular CLI?

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?

How do I use Sass variables in angular?

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.

What is the difference between angular Sass and angular component styles?

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.

How do I get the angular CLI to generate CSS files?

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.


1 Answers

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.

like image 167
Brandon Silva Avatar answered Oct 15 '22 22:10

Brandon Silva