Как импортировать файлы sass в angular 6
Я создал новый проект angular с помощью sass, и я создал папку с именем sass, которая содержит файл с именем _variables.scss,
в компоненте приложения я попытался импортировать такие переменные.
@import 'variables'
когда я запускаю ng serve, я получаю следующую ошибку:
./src/app/app.component.scss Ошибка сборки модуля:
@import 'variables'
^
File to import not found or unreadable: variables.
in C:\Users\Bonge\Documents\Projects\movies_database\movies-client\src\app\app.component.scss (line 1, column 1)
Обратите внимание, что я добавил в angular.json следующее:
"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]
Структура каталогов просто угловое стартовое приложение:
|- src/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss
Тем не менее, я получаю ту же ошибку: что я здесь делаю не так? любая помощь
@lealceldeiro проверьте это просто новое приложение angular для начинающих, ничего особенного
Попробуйте переименовать src/styles.css в src/styles.scss и включить в этот файл другие стили в каталог src/sass. Если вам нравится, посмотрите этот мой Проект GitHub, в котором я делаю то, что вы пытаетесь сделать сейчас. Обратите внимание, что в файле angular.json я установил "styles": [ "src/styles.scss" ],
@lealceldeiro Я добавил все остальное. Я могу импортировать весь этот материал в styles.css, как насчет компонента?
Я понимаю. См. ответ я отправил.
Ответы 2
В новом angular v6 импорт файлов sass немного отличается от предыдущей версии.
Мне просто нужно было импортировать вот так (в таблице стилей компонентов)
@import "~src/sass/variables"; // note: without file extension
Теперь все работает нормально
Спасибо всем за помощь
Теперь я запутался в этом. Предполагается, что ~ относится к папке node_modules.
этот угловой cli v6 совсем другой, проверьте это
Большое спасибо. Большинство статей в Интернете основаны на более старой версии Angular, и они не работали. Большое спасибо за это
это не совсем правильно. использование ~ предполагает, что это папка node_modules. Если у вас есть другая папка за пределами src, решение @Andy Braham правильное
Это действительно помогло мне, потому что мне нужно было использовать абсолютный путь внутри источника шрифта с помощью url (). У меня уже был настроен stylePreprocessorOptions, и он не работал внутри url (). Использование префикса ~ src / вместо этого отсортировало все!
Я понимаю, что это более старый вопрос, но он продолжает появляться в поисках, поэтому я считаю, что обновление в порядке. Существует способ определить ваши собственные пути импорта для SASS, например для библиотек node_modules, все, что вам нужно сделать, это сделать запись stylePreprocessorOptions в разделе options файла angular.json. Необязательно включать все с помощью src\sass
angular.json
"options": {
"outputPath": "dist/App",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/sass/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/sass"
]
},
"scripts": []
},
Затем в своих стилях вы можете просто импортировать их, используя
styles.sass
Примечание. Не включайте расширение файла или начальный ~.
@import 'variables'; // Imports from src/sass
@import 'mixins;
Работает как шарм !! Большое спасибо
ты великолепен
Это обновлено для Angular 7? Я не знаю точно, в какой раздел "параметры" его поместить (сборка? Сервер? Тест? Все?)
@RTYX внутри проектов. <youproject> .architect.build.options
Моя проблема была связана с созданием универсального приложения Angular. После использования ng add @nguniversal/express-engine --clientProject MYPROJECT в существующем проекте и последующего запуска npm run build:ssr я получил ошибку импорта. Решением было добавить "stylePreprocessorOptions": { "includePaths": [ "src/<myStylesFolder>" ] }, в разделы options вновь добавленного определения server. НИКАКИХ ДРУГИХ ИЗМЕНЕНИЙ НЕ ТРЕБУЕТСЯ.
Пожалуйста, разместите структуру каталогов, если это возможно.