Angular -cli, как добавить sass и/или загрузку?

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

ng install sass

Выполнение этой задачи с помощью последней версии (beta.5) дает мне ошибку:

Install failed. Could not find addon with name: sass

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

Ответы

Ответ 1

ПРИМЕЧАНИЕ. Этот ответ устарел из-за изменений в CLI Angular, пожалуйста, обратитесь к ответу ниже от Woot, который является более актуальным.

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

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

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

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

Ответ 2

Если вы создаете свой проект с помощью 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

Надеюсь, что это поможет

Ответ 3

Измените эти строки 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'] на ['app.component.sass']. Он будет работать, как ожидалось.

Ответ 4

После создания с помощью

ng create "project"

перейдите в каталог проекта и попробуйте

npm install sass

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