Угловые параметры командной строки Сасс



Я новичок в Angular, и я прихожу из сообщества Ember. Пытается использовать новые угловые-интерфейс командной строки на основе Эмбер-CLI для.



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



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



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

406   14  

14 ответов:

когда вы создаете свой проект с угловой cli попробуйте это:

ng new My_New_Project --style=sass 

это генерация всех ваших компонентов с предопределенными файлами sass.

если вы хотите синтаксис scss создать свой проект с :

ng new My_New_Project --style=scss

если вы меняете существующий стиль в вашем проекте

ng set defaults.styleExt scss

Cli обрабатывает остальную часть его.

Для Последних Версий

для углового 6 установить новый стиль на существующий проект с Командной строки:

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

или сразу в угловое.json:

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

обновление для угловой 6+

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

    , когда создание нового проекта с угловой командной строки, указать в CSS-препроцессора, как

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

      ng new sassy-project --style=scss
      
    • использовать синтаксис SASS

      ng new sassy-project --style=sass
      
  2. обновление существующего проекта

    Set стиль по умолчанию на существующем проекте под управлением

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

      ng config schematics.@schematics/angular:component.styleext scss
      
    • использовать синтаксис SASS

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

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

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

    здесь styleext может быть scss или sass в соответствии с выбор.




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

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

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

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

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

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

ng set --global defaults.styleExt scss


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

ng new some_project_name --style=scss

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

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

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

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

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

может быть ng new myApp --style=scss

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

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

npm install node-sass --save-dev

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

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

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

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

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

затем в компоненте:

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

если вы хотите глобальную поддержку CSS, то на компоненте верхнего уровня (вероятно приложение.деталь.ТС) удалить заключения и включает СКС:

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" углового.json (обычно строка 11):

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

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

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

npm install node-sass --save-dev

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

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

получить имя проекта по умолчанию использовать:

ng config defaultProject

: Если Вы перенесли свой проект с

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

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

ng set defaults.styleExt=scss --global

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

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

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

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

ng установить значения по умолчанию.styleExt scss

но у этого

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

  • угловой CLI: 6.0.7
  • узел: 8.9.0
  • ОС: linux x64
  • угловые: 6.0.3

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

НГ новый мой-нахальный-приложения-стиль=ССС

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

Шаг1. Установите пакет bulma с помощью npm

npm install --save bulma

Шаг2. Открытый угловой.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

    Ничего не найдено.

Добавить ответ:
Отменить.