Угловые параметры командной строки Сасс
Я новичок в Angular, и я прихожу из сообщества Ember. Пытается использовать новые угловые-интерфейс командной строки на основе Эмбер-CLI для.
Мне нужно знать лучший способ справиться с SASS в новом угловом проекте. Я пробовал использовать ember-cli-sass
репо, чтобы увидеть, будет ли он играть вместе, так как ряд основных компонентов углового CLI запускаются из модулей Ember-CLI.
Это не сработало, но снова не уверен, что я просто неправильно настроил что-то.
также, как лучше всего организовать стили в новом угловом проекте? Было бы неплохо иметь файл sass в той же папке, что и компонент.
14 ответов:
когда вы создаете свой проект с угловой cli попробуйте это:
ng new My_New_Project --style=sass
это генерация всех ваших компонентов с предопределенными файлами sass.
если вы хотите синтаксис scss создать свой проект с :
ng new My_New_Project --style=scss
если вы меняете существующий стиль в вашем проекте
ng set defaults.styleExt scss
Cli обрабатывает остальную часть его.
Для Последних Версий
для углового 6 установить новый стиль на существующий проект с Командной строки:
ng config schematics.@schematics/angular:component.styleext scss
или сразу в угловое.json:
"schematics": { "@schematics/angular:component": { "styleext": "scss" } }
обновление для угловой 6+
Новые Проекты
, когда создание нового проекта с угловой командной строки, указать в CSS-препроцессора, как
использовать синтаксис SCSS
ng new sassy-project --style=scss
использовать синтаксис SASS
ng new sassy-project --style=sass
обновление существующего проекта
Set стиль по умолчанию на существующем проекте под управлением
использовать синтаксис SCSS
ng config schematics.@schematics/angular:component.styleext scss
использовать синтаксис SASS
ng config schematics.@schematics/angular:component.styleext sass
приведенная выше команда обновит ваш файл рабочей области (угловой.json) с
"schematics": { "@schematics/angular:component": { "styleext": "scss" } }
здесь
styleext
может бытьscss
илиsass
в соответствии с выбор.
Оригинальный Ответ (для углового
новые проекты
для новых проектов, мы можем задать параметры
--style=sass
или--style=scss
в соответствии с желаемым вкусом SASS / SCSS
использовать синтаксис SASS
ng new project --style=sass
использовать SCSS синтаксис
ng new project --style=scss
установить
node-sass
,npm install node-sass --save-dev
обновление существующих проектов
сделать
angular-cli
для компиляции файлов sass с помощьюnode-sass
, мне пришлось бежать,npm install node-sass --save-dev
установки
node-sass
. Тогда
для синтаксиса SASS
ng set defaults.styleExt sass
для SCSS синтаксис
ng set defaults.styleExt scss
чтобы установить styleExt по умолчанию в sass
(или)
изменить
styleExt
доsass
илиscss
для нужного синтаксиса в.angular-cli.json
,
для синтаксиса SASS
"defaults": { "styleExt": "sass", }
для синтаксиса SCSS
"defaults": { "styleExt": "scss", }
Хотя он сгенерировал компилятор ошибки.ERROR in multi styles Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project' @ multi styles
который был исправлен путем изменения строк
.angular-cli.json
,"styles": [ "styles.css" ],
или,
для синтаксиса SASS
"styles": [ "styles.sass" ],
для синтаксиса SCSS
"styles": [ "styles.scss" ],
цитата из официального РЕПО github здесь -
чтобы использовать один просто установить, например
npm install node-sass
и переименовать .css файлы в вашем проекте .СКС или .дерзость. Они будут скомпилированы автоматически. Аргумент параметров Angular2App имеет параметры sassCompiler, lessCompiler, stylusCompiler и compassCompiler, которые передаются непосредственно в соответствующие препроцессоры CSS.
посмотреть здесь
скажите angular-cli всегда использовать scss по умолчанию
чтобы избежать прохождения
--style scss
каждый раз, когда вы создаете проект, вы можете настроить конфигурацию angular-cli по умолчанию глобально, с помощью следующей команды:ng set --global defaults.styleExt scss
Обратите внимание, что некоторые версии angular-cli содержат ошибку с чтением указанного выше глобального флага (ссылка). Если ваша версия содержит эту ошибку, создайте свой проект с помощью:ng new some_project_name --style=scss
Как сказал Mertcan, лучший способ использовать scss-это создать проект с этой опцией:
ng new My_New_Project --style=scss
Angular-cli также добавляет возможность изменить препроцессор css по умолчанию после создания проекта с помощью команды:
ng set defaults.styleExt scss
для получения дополнительной информации вы можете посмотреть здесь для их документирования:
Я заметил, что очень anoying попал в перемещение в файлы scss!!! Нужно двигаться от простого:
styleUrls: ['app.component.scss']
доstyleUrls: ['./app.component.scss']
(добавить./
) вapp.component.ts
что ng делает при создании нового проекта, но, по-видимому, не при создании проекта по умолчанию. Если вы видите устранение ошибок во время сборки ng, проверьте эту проблему. Это заняло у меня всего ~ 1 час.
может быть
ng new myApp --style=scss
затем угловой CLI создать любой новый компонент с scss для вас...
обратите внимание, что с помощью
scss
не работает в браузере, как вы, наверное, знаете.. поэтому нам нужно что-то скомпилировать вcss
, по этой причине мы можем использоватьnode-sass
, установите его, как показано ниже:npm install node-sass --save-dev
и вы должны быть хорошо идти!
если вы используете webpack, читайте здесь:
Командная строка внутри папки проекта, где ваш существующий пакет.формат JSON это:
npm install node-sass sass-loader raw-loader --save-dev
In
webpack.common.js
, найдите "правила:" и добавьте этот объект в список конец массива правил (не забудьте добавить запятую в конец предыдущий объект):{ test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader }
затем в компоненте:
@Component({ styleUrls: ['./filename.scss'], })
если вы хотите глобальную поддержку CSS, то на компоненте верхнего уровня (вероятно приложение.деталь.ТС) удалить заключения и включает СКС:
import {ViewEncapsulation} from '@angular/core'; @Component({ selector: 'app', styleUrls: ['./bootstrap.scss'], encapsulation: ViewEncapsulation.None, template: `` }) class App {}
от углового стартера здесь.
ng set --global defaults.styleExt=scss
считается устаревшим, поскольку ng6. Вы получите это сообщение:get / set были осуждены в пользу команды config
вы должны использовать:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Если вы хотите настроить таргетинг на конкретный проект (замените {project} на имя вашего проекта):
ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
Angular-CLI является рекомендуемым методом и является стандартом в сообществе Angular 2+.
Крит новый проект с SCSS
ng new My-New-Project --style=sass
преобразование существующего проекта (CLI меньше, чем v6)
ng set defaults.styleExt scss
(необходимо переименовать все .css файлы вручную при таком подходе, не забудьте переименовать в ваших компонентных файлах)
преобразование существующего проекта (CLI больше, чем v6)
- переименовать все файлы CSS в SCSS и обновить компоненты, которые ссылаются на них.
- добавьте следующее к ключу "schematics" углового.json (обычно строка 11):
"@schematics/angular:component": { "styleext": "sass" }
следующее должно работать в угловом проекте CLI 6. Т. е. если вы получаете:
get / set были осуждены в пользу команды config.
npm install node-sass --save-dev
затем (убедитесь, что вы изменили имя проекта)
ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass
получить имя проекта по умолчанию использовать:
ng config defaultProject
: Если Вы перенесли свой проект с
недопустимый символ JSON: "s" в 0:0
поэтому ручное редактирование
angular.json
потребуется.вы хотите, чтобы это выглядело примерно так (принимая во внимание свойство styleex):
... "projects": { "Sassy": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "styleext": "scss" } } ...
кажется мне слишком сложной схемой. _(ツ)_/
теперь вам нужно будет пойти и изменить все ваши css / less файлы на scss и обновить любые ссылки в компонентах и т. д., Но вы должны быть хорошо идти.
интеграция препроцессора CSS Угловой CLI поддерживает все основные препроцессоры CSS:
чтобы использовать эти препроцессоры просто добавьте файл в styleUrls вашего компонента:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app works!'; }
при создании нового проекта можно также определить, какое расширение вы хотите для файлов типа:
ng new sassy-project --style=sass
или установить стиль по умолчанию для существующего проекта:
ng config schematics.@schematics/angular:component.styleext scss
Примечание: @schematics / angular является схемой по умолчанию для углового Кли
строки стиля, добавленные в компонент@.массив стилей должен быть записан в CSS, потому что CLI не может применить предварительный процессор к встроенным стилям.
на основе угловой документации https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
Я попытался обновить свой проект, чтобы использовать sass с помощью этой команды
ng установить значения по умолчанию.styleExt scss
но у этого
get / set были осуждены в пользу команды config.
- угловой CLI: 6.0.7
- узел: 8.9.0
- ОС: linux x64
- угловые: 6.0.3
поэтому я удалил свой проект (так как я только начинал и не было кода в моем проекте) и создал новый с изначально установленным sass
НГ новый мой-нахальный-приложения-стиль=ССС
но я был бы признателен, если кто-то может поделиться способом обновления существующего проекта, как это было бы неплохо.
Шаг1. Установите пакет bulma с помощью npm
npm install --save bulma
Шаг2. Открытый угловой.json и обновить следующий код
... "styles": [ "node_modules/bulma/css/bulma.css", "src/styles.scss" ], ...
вот именно.
чтобы легко разоблачить инструменты Bulma, добавьте stylePreprocessorOptions в angular.формат JSON.
... "styles": [ "src/styles.scss", "node_modules/bulma/css/bulma.css" ], "stylePreprocessorOptions": { "includePaths": [ "node_modules", "node_modules/bulma/sass/utilities" ] }, ...