Я новичок в Angular и я из сообщества Ember. Попытка использовать новый Angular-CLI на основе Ember-CLI.

Мне нужно знать, как лучше справиться с SASS в новом проекте Angular. Я попытался использовать ember-cli-sassрепо, чтобы посмотреть, будет ли оно работать, так как ряд основных компонентов Angular-CLI запущен из модулей Ember-CLI.

Это не сработало, но, опять же, я не уверен, что я что-то неправильно настроил.

Кроме того, каков наилучший способ организации стилей в новом проекте Angular? Было бы неплохо иметь файл sass в той же папке, что и компонент.

Angular CLI версии 9 (используется для создания проектов Angular 9) теперь берет styleиз схем вместо styleext. Используйте команду как это:
ng config schematics.@schematics/angular:component.style scss
и получившийся angular.json должен выглядеть следующим образом

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

Другие возможные решения и объяснения:

чтобы создать новый проект с угловым CLI с поддержкой sass, попробуйте это:

ng new My_New_Project --style=scss 

Вы также можете использовать --style=sass& если вы не знаете разницу, прочитайте эту короткую и простую статью, и если вы все еще не знаете, просто продолжайте scssи продолжайте учиться.

Если у вас есть проект angular 5, используйте эту команду для обновления конфигурации вашего проекта.

ng set defaults.styleExt scss

Для последних версий

Для Angular 6 установить новый стиль в существующем проекте с CLI:

ng config schematics.@schematics/angular:component.styleext scss

Или прямо в angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Обновление для Angular 6+

1. Новые проекты

   При создании нового проекта с Angular CLI укажите препроцессор css как

   • Использовать синтаксис SCSS

     ng new sassy-project --style=scss
     

   • Использовать синтаксис SASS

     ng new sassy-project --style=sass
     

2. Обновление существующего проекта

   Установить стиль по умолчанию для существующего проекта , запустив

   • Использовать синтаксис SCSS

     ng config schematics.@schematics/angular:component.styleext scss
     

   • Использовать синтаксис SASS

     ng config schematics.@schematics/angular:component.styleext sass
     

   Приведенная выше команда обновит ваш файл рабочей области (angular.json) с

   "schematics": {
       "@schematics/angular:component": {
           "styleext": "scss"
       }
   } 
   

   где styleextможет быть scssили sassпо выбору.

Оригинальный ответ (для угловых <6)

Новые проекты

Для новых проектов мы можем установить параметры --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 в вашем проекте в .scss или .sass. Они будут скомпилированы автоматически. Аргумент параметров Angular2App имеет параметры sassCompiler, lessCompiler, stylusCompiler и compassCompiler, которые передаются непосредственно их соответствующим CSS-препроцессорам.

Посмотреть здесь

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Скажите angular-cli всегда использовать scss по умолчанию

Чтобы избежать передачи --style scssкаждый раз при создании проекта, вы можете настроить глобальную настройку конфигурации по умолчанию angular-cli с помощью следующей команды:

ng set --global defaults.styleExt scss

Обратите внимание, что в некоторых версиях angular-cli есть ошибка с чтением указанного выше глобального флага ( см. Ссылку ). Если ваша версия содержит эту ошибку, создайте свой проект с помощью:

ng new some_project_name --style=scss

Как сказал Мерткан, лучший способ использовать scss - создать проект с такой опцией:

ng new My_New_Project --style=scss 

Angular-cli также добавляет опцию для изменения препроцессора css по умолчанию после создания проекта с помощью команды:

ng set defaults.styleExt scss

Для получения дополнительной информации вы можете посмотреть здесь их документацию:

https://github.com/angular/angular-cli

Я заметил очень неприятную ошибку при переходе к файлам scss !!! Нужно перейти от простого: styleUrls: ['app.component.scss']к styleUrls: ['./app.component.scss'](добавить ./) вapp.component.ts

Что делает нг, когда вы генерируете новый проект, но, по-видимому, не при создании проекта по умолчанию. Если вы видите ошибки разрешения во время сборки ng, проверьте эту проблему. Это заняло у меня всего ~ 1 час.

Лучше всего может быть ng new myApp --style=scss

Затем Angular CLI создаст для вас любой новый компонент с scss ...

Обратите внимание, что использование scssне работает в браузере, как вы, наверное, знаете ... поэтому нам нужно что-то для его компиляции css, поэтому мы можем использовать node-sassего, как показано ниже:

npm install node-sass --save-dev

и тебе должно быть хорошо идти!

Если вы используете веб-пакет, читайте здесь:

Командная строка в папке проекта, где находится ваш существующий package.json: npm install node-sass sass-loader raw-loader --save-dev

В webpack.common.js, найдите «rules:» и добавьте этот объект в конец массива правил (не забудьте добавить запятую в конец предыдущего объекта):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Тогда в вашем компоненте:

@Component({
  styleUrls: ['./filename.scss'],
})

Если вам нужна глобальная поддержка CSS, то в компоненте верхнего уровня (вероятно, app.component.ts) удалите инкапсуляцию и включите SCSS:

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)

1. переименуйте все файлы CSS в SCSS и обновите компоненты, которые ссылаются на них.
2. добавьте следующее к ключу «schematics» angular.json (обычно строка 11):

"@schematics/angular:component": { "styleext": "sass" }

Для Angular 9.0 и выше обновите "schematics":{}объект в файле angular.json следующим образом:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}

Следующее должно работать в угловом проекте CLI 6. Т.е. если вы получаете:

get / set устарела в пользу команды config.

npm install node-sass --save-dev

Затем ( убедившись, что вы изменили название проекта )

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Чтобы получить имя проекта по умолчанию, используйте:

ng config defaultProject

Однако: если вы перенесли свой проект с <6 на угловой 6, есть хороший шанс, что конфигурация не будет там. В этом случае вы можете получить:

Неверный символ 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 и обновить любые ссылки в компонентах и ​​т. Д., Но вы должны быть готовы.

По состоянию на 10.03.2009 г. Ангуар прекратил поддержку sass. Не имеет значения, какую опцию вы передали --styleпри запуске ng new, вы всегда .scssгенерируете файлы. Обидно, что нахальная поддержка была отброшена без объяснения причин.

Установите его как глобальный по умолчанию

ng set defaults.styleExt=scss --global

Интеграция препроцессора CSS Angular 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 - схема по умолчанию для углового интерфейса командной строки

Строки стилей, добавленные в массив @ Component.styles, должны быть написаны на CSS, поскольку CLI не может применять препроцессор к встроенным стилям.

На основе угловой документации https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Я попытался обновить свой проект, чтобы использовать sass с помощью этой команды

ng set defaults.styleExt scss

но получил это

get / set устарела в пользу команды config.

• Угловой CLI: 6.0.7
• Узел: 8.9.0
• ОС: Linux x64
• Угловая: 6.0.3

Поэтому я удалил свой проект (поскольку я только начинал и у меня не было кода в моем проекте) и создал новый с изначально установленным sass

ng new my-sassy-app --style = scss

Но я был бы признателен, если бы кто-нибудь смог поделиться способом обновления существующего проекта, так как это было бы неплохо.

Шаг 1. Установите пакет bulma, используя npm

npm install --save bulma

Шаг 2. Откройте angular.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"
 ]
},
...

БУЛМА + УГЛОВОЙ 6