Как заменить файлы SCSS на Angular CLI? - PullRequest
Новая
       52

Как заменить файлы SCSS на Angular CLI?

0 голосов
/ 16 февраля 2019

Angular CLI предоставляет возможность заменить файлы при сборке проекта.Я хотел бы использовать эту функциональность для замены файла SCSS стилем по умолчанию на файл SCSS, который содержит специфичный для клиента CSS.

Но Angular CLI, похоже, не заменяет файлы SCSS.Как мне этого добиться?

Что я пробовал:

environment.default.ts 

export const environment = {
  name: 'default'
};

environment.special.ts 

export const environment = {
  name: 'special'
};

default / _scss-config.scss 

@debug ('default'); // gets called but should never be called

special / _scss-config.scss 

@debug ('special'); // never gets called

angular.json (только соответствующие части) 

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.default.ts",
            "with": "src/environments/environment.special.ts"
          },
          {
            "replace": "src/scss/default/_scss-config.scss",
            "with": "src/scss/special/_scss-config.scss"
          }
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/scss/default"
          ]
        }
      }
    }
  }

main.ts 

import { environment } from './environments/environment.default';

console.log(environment.name); // 'special' --> replacement works!

Результат:
Замена файлов для .ts файлов работает, но не для .scss файлов, так как специальный отладочный статус никогда не вызывается, но по умолчанию это происходит, даже файл долженбыли отозваны.

1 Ответ

0 голосов
/ 16 февраля 2019

Angular.io заявляет, что:

Основной файл конфигурации CLI, angular.json, [...] позволяет заменить любой файл на определенный для целиверсия этого файла.

На самом деле это видение, но согласно этой ветке GitHub , на данный момент это не так.
Кажется, до сих пор,поддерживаются только файлы .ts и .html.

Таким образом, в настоящее время ответ на вопрос - нет, пока невозможно заменить файлы SCSS.

Но есть обходной путь:
Вы можете использовать различные конфигурации в angular.json для достижения одной и той же цели - замены файла SCSS.

структура папок: 

src/
    scss/
        default/
            _scss-config.scss
        special/
             _scss-config.scss

src / scss / default / scss-config.scss 

body { background-color: blue; }

src / scss / special / scss-config.scss 

body { background-color: red; }

angular.json 

<!-- language: lang-json -->

{
  [...]
  "architect": {
    "build": {
      "options": {
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/scss/default"
          ]
        }
      },
      "configurations": {
        "default": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/scss/default/"
            ]
          }
        },
        "special": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/scss/special/"
            ]
          }
        }
      }      
    },
    "serve": {
      "configurations": {
        "default": {
          "browserTarget": "angular-scss-replacement:build:default"
        },
        "special": {
          "browserTarget": "angular-scss-replacement:build:special"
        }
      }
    }     
    [...]      
  }
}

style.scss или component.scss 

@import 'scss-config';

/* use your SCSS variables and stuff as you normally would */

Обратите внимание, что вы не должны включать_ (подчеркивание) из имени файла в операторе импорта
(подробнее см. раздел Partials )

Как его использовать:

// 'ng serve'-command uses default configuration as defined in angular.json > build 
ng serve

// default config creates blue background
ng serve --configuration=default


// specail config create red background
ng serve -c=special

(Это решение из упомянутой выше темы - от thx до richardtreier )

Недостатки этого подхода:

  • Это вынуждает вас иметь определенную структуру папок для разделения ваших различных конфигураций SCSS
  • Это может вынудить вас переместить эти папки из вашей обычнойструктура папок.
    Например, "includePaths": ["src/scss"] не будет работать с вышеупомянутой структурой папок, поскольку конфигурации SCSS не могут быть загружены отдельно.
...