CODEWITHSUNDEEP
angularsassnativescript
user1261710
user1261710

Reputation: 2639

Angular - how to configure scss files so that you don't need to include the full path?

I'm building an app with NativeScript 6.4.1 and Angular 8.

I need to import my sass variables into all of my component scss files.

component.scss

@import '../../../css/variables';

.sidedrawer-header {
    background-color: $vivid_cerulean;
    padding: 50px;
}

.sidedrawer-content {
    background-color: $vivid_cerulean2;
}

_variables.scss

$navy_blue: #105195;
$vivid_cerulean: #28abe2;
$white: #ffffff;
$dark_navy_blue: #063260;
$light_grey: #eeeeee;
$error_red: #eb2026;
$vivid_cerulean2: #3eb4e5;

I see that the import statements could be cumbersome in the future with all the different paths.

Is there a way to make the import statement cleaner?

I would like it to be something like this:

@import '~variables'

My project has a webpack.config.js file, and an agular.json file.

Upvotes: 0

Views: 2513

Answers (1)

Lievno
Lievno

Reputation: 1041

You can take a look at the documentation Additional build and test options for the stylePreprocessorOptions.

From Angular documentation:

To add paths, use the stylePreprocessorOptions option:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "cli": {
    "packageManager": "npm"
  },
  "projects": {
    "your-project": {
      "root": "projects/",
      "sourceRoot": "projects/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "assets": [],
            "stylePreprocessorOptions": {
              "includePaths": []
            },
            "styles": [],
            "scripts": []
          },

Files in that folder, such as src/style-paths/_variables.scss, can be imported from anywhere in your project without the need for a relative path:

// src/app/app.component.scss
// A relative path works
@import '../style-paths/variables';
// But now this works as well
@import 'variables';

And bty the way the tilde (~) is use for node_modules path StackOverflow

Upvotes: 3

Related Questions