Компонент не может найти переменную в файле .s css

Question

Angular. json фрагмент:

"root": "",
  "sourceRoot": "src",
  "prefix": "ra",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/assets",
          "src/favicon.ico",
        ],
        "styles": [
          "src/styles.scss"
        ],
        "stylePreprocessorOptions": {
          "includePaths": ["assets/scss"]
        },
      }

Новичок в Angular, и я думаю, что у меня есть легкая проблема, но я просто не понимаю внутреннюю работу как s css компилируется. Я импортирую некоторые s css в мой root styles.s css компонент. Вот что в styles.s css:

@import './assets/scss/global';

Вот что в _global.s css:

@import './variables';

И вот содержимое этого файла:

$spacer-4: 0.25em; //4px
$spacer-6: 0.375em; //6px
$spacer-8: 0.5em; //8px
$spacer-10: 0.625em; //10px
$spacer-12: 0.75em; //12px
$spacer-16: 1em; //16px
$spacer-20: 1.25em; //20px
$spacer-24: 1.5em; //24px
$spacer-30: 1.875em; //30px
$spacer-32: 2em; //32px
$spacer-36: 2.25em; //36px

Проблема в файле css компонента, который ссылается на одну из переменных. Из компонента выдается ошибка:

ERROR in ./src/navigation/app-navigation/app-navigation.component.scss    

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

margin-top: $spacer-10;
           ^
  Undefined variable.

Если я не получаю ошибку времени компиляции, что файл не найден, то я не должен видеть эту ошибку, верно?

Вот файловая структура приложения:

-- src
    -- app
        -- navigation
            --app-navigation
                -- app-navigation.component.scss
    -- assets
        -- scss
            -- _global.scss
            -- _variables.scss
    -- styles.scss

Answer 1

Ваша проблема - порядок создания. Стили по умолчанию.s.s 1016 * являются последними в строке в порядке, поэтому ваш компонент не имеет ссылки на ваши переменные / глобальные переменные при выводе.

Чтобы исправить это, просто добавьте ссылку на импорт в сам компонент, чтобы он мог получать эти переменные, когда это необходимо. Что является хорошим основанием для применения некоторых правил архитектуры уровня представления для ваших целей. Как и в случае с переменными, я бы предложил сохранить файл с ТОЛЬКО переменными, так как они не будут переноситься, и тогда вы сможете ссылаться на него там, где нужны эти переменные, и не иметь дубликатов CSS, как если бы у вас был какой-либо фактический CSS в файле globals в скомпилированных ресурсах.

Я предлагаю, если вы еще не добавили stylePreprocessorOptions к вашей конфигурации сборки в angular. json с фиксированным путем ссылки на каталог, в котором хранится такие файлы, как глобальные, поэтому вам не нужно указывать абсолютные пути каждый раз, когда вы его используете (не забудьте также добавить объявление в вашу конфигурацию «serve» в angular. json), например;

"stylePreprocessorOptions": {
   "includePaths": [
      "assets/sass/"
    ]
},

Затем, например, в файле css вашего компонента вы добавляете только @import 'variables', и он при необходимости предоставит значения var. В качестве альтернативы вы могли бы пройти весь путь, но это может сделать обслуживание проблематичным, но сработает, просто убедившись, что ваш путь правильный @import '../../variables'; и с этим в вашем компоненте s css он также предоставит переменные, но я настоятельно рекомендую настройка путей импорта в angular. json.

Надеюсь, это поможет, ура!