angular-cli как добавить sass и / или bootstrap?

Я пробую angular-cli и пытаюсь получить sass и bootstrap в проекте. Я читал в wiki что вы можете просто сделать:

ng install sass

делать это с текущей последней (бета-версия.5) дает мне ошибку:

Install failed. Could not find addon with name: sass

Как я могу установить bootstrap и или sass таким образом, что angular-cli будет иметь дело с индексной страницей и systemJS?

20
angular angular-cli

6 ответов

Примечание: этот ответ устарел из-за изменений в угловом CLI, пожалуйста, обратитесь к ответу ниже от Woot, который является более актуальным.

вам нужно установить node-sass via npm i node-sass --save-dev затем измените свой styleExt в angular-cli.json или sass или scss (или вы можете установить это через ng set defaults.styleExt scss

что касается bootstrap, поместите его под public каталог (я использую sub dir с именем style) и указать его в index.html

обновление: Также, если вы хотите иметь файлы переменных, вы можете добавить каталог в angular-cli-build.js такой...

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});
39

Если вы создаете свой проект с angular-cli, он поставляется с препроцессором scss. Если у вас есть файлы стилей, вы можете просто изменить ext на scss, и ng serve скомпилирует их для вас.

когда вы создаете проект с помощью cli, вы можете сказать ему, что хотите использовать scss по 

ng new sassy-project --style=sass

Если у вас есть существующий проект 

ng set defaults.styleExt scss

все это говорит cli, что при создании новых компонентов, которые вы хотите, чтобы они были созданы со стилями scss не css. Он не добавляет компилятор или не включает компилятор, потому что он уже есть.

дополнительная документация https://github.com/angular/angular-cli

надеюсь, что это помогает

62

изменить эти строки angular-cli.json С

"apps": [
    {
        "styles": [
                "styles.css"
              ]
    }
]

to 

"apps": [
    {
        "styles": [
                "styles.sass"
              ]
    }
]

после установки styleExt

ng set defaults.styleExt scss

затем измените src/style.css до src/style.sass и ['app.component.css'] to ['app.component.sass']. Он будет работать, как ожидалось.

6

после создания с 

ng create "project"

перейдите в каталог проекта и попробуйте с помощью 

npm install sass

он обновит ваш пакет.в JSON

0

вы можете использовать этот поток, чтобы увидеть Как добавить bootstrap в проект angular-cli

как добавить bootstrap в проект angular-cli

0

спасибо Woot за его ответ, этот ответ больше для разработчиков .NET Core 2.0 / 2.1, использующих проект angular seed через:

#get lastest SPA templates and make sure angular CLI is global
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
npm install -g @angular/cli

#create a new project, default for target framework doesn't seem to be working when .NET Core 2.1 SDK is Installed
dotnet new angular -f netcoreapp2.0 -o test-web-app

этот начальный проект по-прежнему использует версию bootstrap 3, поэтому он требует загрузки bootstrap-sass (или обновления до bootstrap 4, который включает поддержку scss в модуле базового узла):

npm install bootstrap-sass --save-dev

в рамках .угловой-cli.файл json изменяет конфигурацию стилей из это:

"styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

в:

"styles": [
   "styles.scss",
   "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
]

и, как указал Woot, обновление конфигурации углового cli для создания файлов scss вместо файлов css при автосоздании файла также должно выполняться:

ng set defaults.styleExt scss

и переименование вы стили.в CSS до стили.scss не требуется.

угловой CLI и угловая версия также немного устарели на момент написания этой статьи (1.7.0 и 5.2.0), поэтому этот ответ является предметом изменить после обновления. а, это работает, и ничего больше не нужно делать, чтобы позволить:

dotnet run

для поддержки автоматической компиляции scss в css и обслуживания файлов под капотом через НГ служить.

0