Ошибка компиляции Angular 6 SCSS из util.js

Question

Я только начинаю с Angular 6, использую Angular CLI и знакомлюсь с файловой структурой.Я намерен использовать SCSS для создания единой глобальной таблицы стилей.Тем не менее, когда я компилирую, я получаю сообщение об ошибке:

ERROR in ./src/app/top-bar/top-bar.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

// Copyright Joyent, Inc. and other Node contributors.
^
Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at- 
rule, was "var formatRegExp = "
in /Users/me/Documents/projects/node_modules/util/util.js 
(line 1, column 1)

Моя пользовательская папка scss находится в src/assets/scss.

Мой компонент верхней панели находится в src/app/top-bar.

Я пытаюсь получить доступ к src/assets/scss/app.scss в src/app/top-bar/top-bar.component.scss и получаю вышеуказанную ошибку.

Я пробовал многочисленные способы импорта файлов @import "~/assets/scss/app.scss"; и @import "../assets/scss/app.scss";, чтобы включить необходимыепеременные, но я не могу быть уверен в том, что я делаю неправильно, так как ошибка кажется расплывчатой ​​и не указывает ни на какой конкретный файл, кроме основной угловой утилиты.

Если кто-то может пролить свет, даже на процесс отладки длятакая ошибка очень поможет.

Answer 1

Как указал @crimbo, проблема в https://github.com/webpack-contrib/sass-loader/issues/556, но я не могу переименовать файлы, потому что я использую стороннюю библиотеку ( Foundation 6 ).

Iпонижен до sass-loader@6.0.7

npm install --save-dev sass-loader@6.0.7

, и он работает для меня для Angular 7.1.4 , который первоначально использовал sass-loader@ 7.1.0

Согласно примечаниям к выпуску https://github.com/webpack-contrib/sass-loader/releases/tag/v7.0.0 критические изменения:

• Отказ от поддержки официального узла 4
• Это немногоменяет алгоритм разрешения.Не должен ломаться при обычном использовании, но может ломаться в сложных конфигурациях.
• Загрузчик sass выдает ошибку во время выполнения и отказывается компилироваться, если зависимость от однорангового узла неверна.Это может привести к поломке приложений, в которых просто игнорируется предупреждение о зависимости от пира npm.

, которые не являются проблемой для моего случая

Answer 2

Обходной путь для Angular7 + (невозможно отменить версию sass-loader) и комбинации Foundation6 + и SASS:

Не @import util/util от основания в ваших файлах .scss, но комбинация отдельных пакетов (точка останова, цвет, направление,flex, math, mixins, selector, typography, unit, value), в зависимости от того, что вам нужно, или обмануть его с помощью ./util/util.Также foundation.scss и settings.scss импортирует util внутри них, поэтому эти файлы следует избегать или исправлять локально до исправления sass-loader.

Answer 3

Я столкнулся с той же проблемой.Основной причиной является ошибка в загрузчике / преобразователе файлов SCSS, используемой веб-пакетом (используется @ angular / cli), который загружает файлы JS в дополнение к файлам SCSS.

Ошибка заключается в том, что файлы JS имеют приоритет над файламиФайлы SCSS.Проблема GitHub находится здесь:

https://github.com/webpack-contrib/sass-loader/issues/556

Плохая новость заключается в том, что проблема была открыта в течение 8 месяцев, и запросы на ее устранение не были приняты.

Хорошая новость заключается в том, что вы можете обойти эту проблему, используя имена файлов SCSS, которые не соответствуют именам файлов JS в подкаталогах node_modules.

Например, у меня был файл SCSS с именем _util.scss, и моя ошибка была:

  Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at-rule, was "var formatRegExp = "      
     in C:\src\project\node_modules\util\util.js (line 1, column 1)

Мое исправление состояло в том, чтобы переименовать мой файл SCSS в _sass-util.scss.Надеюсь, это поможет.