0

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.

user1261710
  • 2,539
  • 5
  • 41
  • 72

1 Answers1

3

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

Lievno
  • 1,013
  • 9
  • 14
  • Where in the config file do you put those settings? I got an error. – user1261710 Apr 15 '20 at 08:52
  • In architect -> build -> options (angular.json) – Lievno Apr 15 '20 at 08:59
  • property architect is not allowed – user1261710 Apr 15 '20 at 09:00
  • This did not work for me there is an error: "architect": { "build": { "options": { "stylePreprocessorOptions": { "includePaths": [ "src/css" ] } } } } I am using node-sass – user1261710 Apr 15 '20 at 09:05
  • My bad, I specified, it is in "angular.json" not in "webpack.config.js" – Lievno Apr 15 '20 at 10:41
  • Yeah, that's where I'm getting the error as well in angular.json – user1261710 Apr 15 '20 at 10:45
  • I have updated my post, check above. I hope it will help you – Lievno Apr 15 '20 at 15:23
  • Thanks for your help. It still didn't work for me. Is a webpack setting also required? { test: /[\/|\\]app\.scss$/, use: [ "nativescript-dev-webpack/style-hot-loader", { loader: "css-loader", options: { url: false } }, "sass-loader" ] }, { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, – user1261710 Apr 15 '20 at 15:38
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211740/discussion-between-lievno-and-user1261710). – Lievno Apr 15 '20 at 17:48