Visual Studio 2017 Angular 템플릿으로 작성된 Angular 2 응용 프로그램에서 전역 CSS를 추가 할 위치

저는 Angular가 새롭고 Visual Studio 2017 Angular Spa 템플릿을 사용하여 Angular 2 응용 프로그램을 만들었습니다.Visual Studio 2017 Angular 템플릿으로 작성된 Angular 2 응용 프로그램에서 전역 CSS를 추가 할 위치

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

하지만 어디 모른다 : 내 프로젝트에 그 가이드의 각도 재료를 추가 할

내가이를 추가 할 필요가 있다고 말했다.

내가 app.component.css 파일 안에 추가 있습니다

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");

하지만 경고를 얻을 :

(CssLint) @import 대신 사용, 병렬 다운로드를 방지합니다.

나는 이것을 answer이라고했지만, 내 문제에는 해당되지 않는다고 생각합니다.

전 세계적으로 사용할 스타일이나 글꼴은 어디에서 추가 할 수 있습니까?

출처

2017-12-21 VansFannel

Angular 프로젝트 폴더에 src/app/이 있어야합니다. app -folder에서 index.html과 styles.css을 볼 수 있습니다. 그래서이 두 파일은 전역 적입니다. 글꼴 유형을 index.html에서 @import을 사용하여 styles.css에 추가 할 수 있습니다.

질문이있는 경우 wwwroot 폴더에 index.html이 있어야합니다. this example에서 저자가 그렇게합니다. 예를 index.html를 들어

: 당신이 실제로 게시 당신에게 적용되지만, 먼저이 글꼴을 다운로드하고 정적 자산이 될 수 있도록이 프로젝트 디렉토리에 복사해야합니다

<html> 
    <head> 
    .... 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> 
    ... 
    </head> 
    <body> 
    ... 
    </body> 
</html>

출처

2017-12-21 07:56:24

아니요, Visual Studio 2011 SPA 템플릿의 각도입니다. src 폴더 나'src/app' 폴더 또는'index.html' 파일은 없습니다. – VansFannel

@VansFannel 답변을 업데이트했습니다. index.html의 wwwroot-folder를 확인하십시오. –

대답. 그런 다음 webpack plugin (look here)을 사용하여이 파일을 가져올 수 있습니다. Visual Studio에서 생성 한 프로젝트에 익숙하지 않은 경우 link 태그를 index.html 안에 넣고 head 태그 안에 태그를 추가하면됩니다.

<html> 
<head> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> 
</head> 
... 
</html>

출처

2017-12-21 07:57:01

이것은 Visual Studio 2017 SPA 템플릿으로 작성된 각도이며'index.html' 파일이 없습니다. 'Views \ Home \ Index.cshtml'이 있습니다. – VansFannel

마지막으로'View \ Shared \ _Layout.cshtml'으로 옮겼습니다. – VansFannel

내가 틀리지 않으면, 어쨌든'link' 태그를 index.cshtml에 추가 할 수 있습니다. 왜냐하면 staticaly로 정의 된 태그 html을 처리하기 때문입니다. –

여러분은 Angular를 처음 사용하기 때문에 지침을 따르십시오.

그리고 가이드 라인 중 하나는 using the Angular CLI 프로젝트를 만드는 것입니다.

프로젝트를 만들었 으면 앵귤러 머티리얼을 추가하려면 해당 가이드도 따르십시오.

글꼴 문제 : 스타일을 가져 오려고하지 않고 글꼴을 가져 오려고합니다. 글꼴은 머리글 인 index.html 페이지에 있습니다. @ 그레고르는 그것을 잘 배치했다.

출처

2017-12-21 08:01:34 trichetriche

CSS 파일을 webpack.config.vendor.js의 nonTreeShakableModules 배열에만 추가하십시오 (예 : 내 webpack.config.공급 업체는 당신 때문에

const nonTreeShakableModules = [ 
    'bootstrap-css-only/css/bootstrap.css', 
    'font-awesome/css/font-awesome.css', 
    'es6-promise', 
    'es6-shim', 
    'event-source-polyfill' 
];

은 글꼴의 경우

const clientBundleConfig = merge(sharedConfig, { 
     entry: { 
      vendor: isDevBuild ? allModules : nonTreeShakableModules 
     }, 
    }

(같은 webpack.config.vendor에) 가지고있는 것처럼 최고의 solucion가 단순히 추가 않다면 내가 몰라 @layreg.cshtml의 @Gregorg로 연결되는 링크

출처

2017-12-21 08:25:25 Eliseo

Visual Studio 2017 Angular 템플릿으로 작성된 Angular 2 응용 프로그램에서 전역 CSS를 추가 할 위치

답변

관련 문제