Как добавить глобальные стили, не требуя дополнительного компонента?

Я хочу применить некоторые глобальные стили к своему веб-сайту (тело, h1, h2, h3 и т. д.).

Чтобы сделать это с помощью Angular2, представление инкапсуляции компонента необходимо установить таким образом: encapsulation: ViewEncapsulation.None.

пример:

@Component({
  selector: 'app-root',
  templateUrl: template(),
  styleUrls: ['global.scss', 'app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = 'Hello world!';
}

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

Есть ли другой способ сделать это, не требуя дополнительного компонента и не редактируя конфигурацию сборки Angular-CLI?

(Я использую angular/core 2.0.0-rc.5 и angular-cli 1.0.0-beta.11-webpack.2)


angular css angular-cli
person zakdances    schedule 13.08.2016    source источник
comment
Почему бы вам просто не добавить глобальную таблицу стилей в ваш index.html? Я имею в виду, стильный материал приятный и блестящий, но в нем нет ничего особенного, что вы ДОЛЖНЫ использовать.   -  person lexith    schedule 13.08.2016
comment
Потому что Angular-CLI этого не обнаруживает и, следовательно, не включает в сборки. Если я не ошибаюсь, все ресурсы должны быть импортированы или указаны в сценариях.   -  person zakdances    schedule 13.08.2016

Ответы (3)


arrow_upward
0
arrow_downward

PR, упомянутый drbishop, был объединен и выпущен как 1.0.0-beta.11-webpack.3.

Чтобы перейти с 1.0.0-beta.11-webpack.2 на 1.0.0-beta.11-webpack.3, запустите:

npm uninstall -g angular-cli
npm cache clean
npm install -g [email protected]

Примечание. Если вы получаете SyntaxError: Unexpected token ... ошибок при запуске ng version после обновления, вам может потребоваться выполнить обновление до Node.js 6. См. https://github.com/angular/angular-cli/issues/1883 для получения подробной информации.

Если вы создаете новый проект с помощью 1.0.0-beta.11-webpack.3, вы можете добавить файл styles.css в каталог src, который будет автоматически включен в вашу сборку. Вы также можете добавить внешний импорт CSS в свойство apps[0].styles элемента angular-cli.json.

Ваш angular-cli.json должен выглядеть примерно так для нового проекта, сгенерированного 1.0.0-beta.11-webpack.3:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}
person Mark Leong    schedule 30.08.2016
comment
Обратите внимание, что на дату этого комментария 1.0.0-beta.11-webpack.8 является текущей версией. - person zakdances; 31.08.2016

arrow_upward
0
arrow_downward

В настоящее время это разрабатывается и будет реализовано перед окончательным выпуском. Общая идея заключается в том, чтобы предоставить ссылку на файл стиля (CSS/SCSS/LESS...) и включить его в приложение.

person Brocco    schedule 14.08.2016

arrow_upward
0
arrow_downward

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

Затем обновите файл angular-cli.json:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "mobile": false,
      "additionalEntries": [
        { "input": "polyfills.ts", "output": "polyfills.js" },
        "styles.sass"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
person brians69    schedule 16.08.2016