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

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

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

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

JDillon522

Ответов: 18

Ответы (18)

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

"схемы": {
   "@ schematics / angular: component": {
      "стиль": "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"
    }
}

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

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

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

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

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

    Когда генерирует новый проект с Angular CLI, укажите препроцессор css как

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

      новый нахальный проект --style = scss
      
    • Использовать синтаксис SASS

      новый дерзкий проект --style = sass
      
  2. Обновление существующего проекта

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

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

      схемы конфигурации ng. @ Schematics / angular: component.styleext scss
      
    • Использовать синтаксис SASS

      схемы конфигурации ng. @ Schematics / angular: component.styleext sass
      

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

    "схемы": {
        "@ schematics / angular: component": {
            "styleext": "scss"
        }
    }
    

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




Исходный ответ (для Angular <6)

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

Для новых проектов мы можем установить параметры - style = sass или - style = scss в соответствии с желаемым ароматом SASS / SCSS

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

    новый проект --style = sass
    
  • Использовать синтаксис SCSS

    новый проект --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
    

, чтобы установить стиль по умолчанию, Ext на sass

(или)

изменить styleExt на sass или scss для желаемого синтаксиса в .angular-cli.json,

  • для синтаксиса SASS

    "по умолчанию": {
         "styleExt": "дерзость",
    }
    
  • для синтаксиса SCSS

    "по умолчанию": {
         "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.sass"
          ],
    
  • для синтаксиса SCSS

    "стили": [
            "styles.scss"
          ],
    

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

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

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

npm install node-sass --save-dev

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

Если вы используете webpack, прочтите здесь:

Командная строка внутри папки проекта, где находится ваш существующий 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 {}

из стартера Angular здесь.

Angular-CLI is the recommended method and is the standard in the Angular 2+ community.

Crete a new project with SCSS

ng new My-New-Project --style=sass

Convert an existing project (CLI less than v6)

ng set defaults.styleExt scss

(must rename all .css files manually with this approach, don't forget to rename in your component files)


Convert an existing project (CLI greater than v6)

  1. rename all CSS files to SCSS and update components that reference them.
  2. add the following to the "schematics" key of angular.json (usually line 11):

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

TL;DR

Quick note: In Angular 9 & onwards, styleext is renamed to style

Angular 9 & 9+
While creating a new project:
ng new my-proj --style=scss

For an existing one:
ng schematics.@schematics/angular:component.style scss

For Angular 2 - Angular 8:
For an existing project:
ng config schematics.@schematics/angular:component.styleext scss

Detailed answer

Angular 9 & 9+ :

Via Angular CLI
ng config schematics.@schematics/angular:component.style scss
Directly in the angular.json:
"schematics": {
   "@schematics/angular:component": {
   "style": "scss"
   }
}

For older versions

Via the Angular CLI:
ng config schematics.@schematics/angular:component.styleext scss
Directly in the angular.json:

note: lookup angular-cli.json for versions older than 6. For version 6 & 6+ the file has been renamed to angular.json

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

Note: Original SO answer can be found here

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

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

"схемы": {
  "@ schematics / angular: component": {
    "стиль": "scss"
  }
}

НЕ ИСПОЛЬЗУЙТЕ ВСТРОЕННУЮ СИСТЕМУ CSS SASS ИЛИ ANGULAR !!

Я не могу этого особо подчеркнуть. Люди в Angular не понимали основных систем каскадных таблиц стилей, поскольку, когда вы используете обе эти технологии - как с этой настройкой angular.json - компилятор помещает весь ваш CSS в модули Javascript, а затем выплевывает их в заголовок ваших HTML-страниц как встроенных CSS, который нарушает и сбивает с толку каскадные порядки и отключает собственные каскады импорта CSS.

По этой причине я рекомендую вам УДАЛИТЬ ВСЕ ССЫЛКИ СТИЛЯ ИЗ "ANGULAR.JSON", а затем добавить их обратно в свой "index.html" вручную в виде ссылок, подобных этой:


• 100001 неуклюжий встроенный CSS, вставленный в заголовок всех ваших веб-страниц, что пытается сделать Angular.

SASS даже не нужен, если вы понимаете, как управлять каскадами в базовых файлах CSS. Управление большими сайтами со сложным CSS может быть очень простым для тех, кто пытается изучить каскадные заказы, используя несколько связанных файлов CSS.

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

ng set defaults.styleExt = scss --global

Для Angular 12 обновите angular.json с помощью:

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

и:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

По состоянию на 10.03.2019 Anguar прекратил поддержку sass. Независимо от того, какой параметр вы передали в - style, при запуске ng newвы всегда получаете файлы .scss. Жалко, что поддержка sass была прекращена без каких-либо объяснений.

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

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

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

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

ng set --global defaults.styleExt scss


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

ng new some_project_name --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

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"}'

Цитируется из официального репозитория github здесь -

Для использования просто установите, например,

npm install node-sass

и переименуйте файлы .css в своем проекте в .scss или .sass. Они будут скомпилированы автоматически. Аргумент параметров Angular2App имеет параметры sassCompiler, lessCompiler, stylusCompiler и compassCompiler, которые передаются непосредственно в соответствующие препроцессоры CSS.

Смотрите здесь

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

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

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

2022 WebDevInsider