webpack을 사용하여 Angular app에 scss 파일을 전역으로 포함시키는 방법은 무엇입니까?

Question

Webpack과 함께 Angular 응용 프로그램이 있고 응용 프로그램의 전역 스타일이있는 application.scss 파일도 있습니다.

모든 구성 요소에서 정의 된 스타일을 사용할 수 있도록이 파일을 내 응용 프로그램에 포함시키는 가장 좋은 방법은 무엇입니까?

CSS 파일 만 허용되므로 scss 파일을 index.html의 링크로 포함 할 수 없으므로 어떤 옵션이 가장 좋습니까?

감사합니다.

Answer 1

이 작업에 대한 구성이 있습니다.

제가 scss 파일에 대해서 이야기하고있는 중입니다. 저는 index.html에서 가져올 수 없으며, webpack을 사용하기 때문에이 파일을 어딘가에 명시 적으로 가져와야합니다. 그래서 내가하는 일은 import입니다. 내 main.ts에

import './stylesheets/application.sass'; 

그럼 난 그냥 (각도와 웹팩을 사용하는 경우 이미 할 일이다) 이러한 파일 형식을 처리하기 위해 웹팩를 구성해야합니다; 그래서 내 웹팩 구성 파일에이 규칙을 사용하고 있습니다.

{ 
     test: /\.sass$/, 
     include: path.resolve(__dirname, '../src/stylesheets'), 
     use: ExtractTextPlugin.extract({ 
      use: ['css-loader', 'sass-loader'] 
     }) 
     }, 

그리고 그게 전부입니다. 모든 일.