Использование Sass в angular 2

Ответ 1

[Проверьте отредактированную часть в конце этого ответа, если вы используете angular cli]

Объяснение того, как использовать sass в "quickstart seed" (https://angular.io/guide/quickstart) (https://angular.io/guide/setup#download)

Просьба выполнить следующие простые шаги:

Шаг 1: Настройте семя быстрого запуска

Используйте приведенные ниже команды для настройки

npm install
npm start

вы увидите "Hello Angular" в браузере.

Шаг 2: Установите node -sass и sass-loader

Используйте команды, указанные ниже, для установки

npm i node-sass -S
npm i sass-loader -S

Теперь вы можете видеть, что оба из них добавлены в ваши "зависимости" внутри файла "package.json".

Шаг 3: Создайте 2 папки для кода Sass и кода Css

Создайте две папки с любым именем в папке "quickstart-master". В этом случае, например:   "sass_folder" и "css_folder" . Теперь создайте демо файл "demo.sass" и поместите его в "sass_folder". Вы можете поместить простой sass-код в этот .sass файл. Он будет выглядеть следующим образом:

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

Шаг 4: Внесите изменения в файл 'package.json'

Добавить скрипты для сборки и просмотра кода Sass, присутствующие в "sass_folder". После компиляции полученный css-код должен быть сохранен в "css_folder" . После изменений "Сценарии" в файле "package.json" должны выглядеть так:

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

Посмотрите только на "start", "build: sass" и "watch: sass".

Шаг 5: Запустите приложение

Теперь вы можете запустить приложение, используя следующую команду:

npm start

Вы увидите скомпилированный код css в "css_folder" с тем же именем файла "demo.css". Он будет выглядеть так (в этом случае):

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

Теперь, если вы внесете какие-либо изменения в .sass файл, он будет динамически отображаться в .css файл, когда script просматривает код.

Если он показывает ошибку, закройте файл .css, когда вы вносите какие-либо изменения в файл .sass.

Примечание. Для кода scss вы можете выполнить те же шаги. В этом случае вам просто нужно поместить файл .scss в "sass_folder".

[редактировать] Если вы хотите использовать angular CLI:

Во время создания нового проекта angular используйте ниже упомянутые cmnds:

Для sass:

ng new Demo_Project --style=sass

Для scss:

ng new Demo_Project --style=scss

Чтобы изменить существующий стиль:

ng set defaults.styleExt scss

После этого вы можете обычно использовать Cli.

Ответ 2

Я могу объяснить вам первый.

Если вы используете ng server, скомпилированные файлы сохраняются в скрытой папке в вашем проекте.

Если вы используете ng build, вы можете увидеть свои скомпилированные файлы в папке /dist. В этой папке вы можете найти свои общие стили в стилях файла. Hashversion.css, но локальные стили компонентов включены внутри основного. [Hashversion].js by Webpack.

Angular -cli использует webpack, и если вы хотите узнать больше о нем, см. Документы в Интернете

UPDATE

Во втором случае вы должны скомпилировать sass вручную. В папке приложения не будет app.component.ts, который будет скомпилирован в той же папке на app.component.js с помощью Typescript Compiler. Таким образом, вы должны сделать то же самое с sass. Импортируйте файл CSS в компонент.

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

Заметил, что вы не можете использовать относительный путь, потому что все будет запрашиваться из корневого каталога.

Создайте app.component.sass и поместите свои стили внутри.

Затем выполните компилятор sass, который скомпилирует app.component.sass to app.component.css

Запустите сервер, и он будет работать.