Angular2-webpack-starter kit 및 SCSS 지원

내 모든 두 번째 scss 파일에 가져온 마스터 scss 파일이 있습니다. 이 구성 요소에이 scss를 포함 시키려고합니다. 나는 How to include SCSS in components를 따라 갔지만 오류가 발생했습니다. 나는 모든 단계를 수행하면이 오류를 얻을 : 내 주하는 SCS의 시작 부분에있는 주석입니다Angular2-webpack-starter kit 및 SCSS 지원

ERROR in ./src/styles/os_theme.scss

Module build failed:

// Loosely based on https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" 
    in D:\project\src\styles\os_theme.scss (line 1, column 1) 

. 나는 webpack.common.js의이 부분을 제거하면

는 :

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

을 나는 오류를 얻을 수없는 경우 dev에 서버가 실행하고 이상하게도 내 글은 내가 기대 스타일을 얻을 수 있지만 응용 프로그램의 나머지 실행되지 않고 콘솔에 다음 오류가 표시됩니다.

Error: Expected 'styles' to be an array of strings.

다음은 구성 요소의 모습입니다.

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: ['../../src/styles/os_theme.scss'], 
    templateUrl: 'app.component.html' 
})

폴더 구조는 app.component.ts : 나는 무엇을 이해하고 있지 않다

-src 
--styles 
--- os_theme.scss (as imports to my other files) 
--- _general.scss 
--- components 
----_components.buttons.scss 
- app 
-- app.component.ts

출처

2017-01-11 ToddB

나는 가이드가되지 있다고 생각하지만, 당신은 그들이 scss 및 css 파일을 어떻게 사용했는지 확인하기 위해 commit 및 app.module.ts 파일을 확인할 수 있습니다.

출처

2017-01-11 05:36:49 ranakrunal9

위키 접근법을 시도하기 위해 파일을 제거했을 때 감사하겠습니다. 이것은 전혀 새로운 것이지만 Angular2의 styleUrl을 사용하는 대신 import 구문을 사용한 이유는 무엇입니까? – ToddB

[여기] (https://github.com/AngularClass/angular2-webpack-starter/pull/1304)는 왜 그렇게했는지 설명합니다. 클릭을 저장하기 위해 주 CSS 파일은 JS에 더 이상 중첩되지 않으며 별도의 파일로 생성되어 첫 번째로드에서 더 부드러운 UX를 제공합니다. –

Angular2-webpack-starter kit 및 SCSS 지원

답변

관련 문제