Angular2-webpack-starterキットとSCSSのサポート

Question

私はすべての私のseconday scssファイルへのインポートでマスターscssファイルを持っています。私はこのscssを私のコンポーネントに入れようとしています。私はHow to include SCSS in componentsに従ったが、ただエラーが出る。すべての手順を実行すると、このエラーが表示されます。

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) 

これは私の主なscssの冒頭にあるコメントです。

私は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.

これは私のコンポーネントの外観です。 app.component.ts

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

フォルダ構造は次のとおりです。

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

私は何を理解していないのですか？

Answer 1

私はガイドが廃止されていると思いますが、あなたは彼らがscssとcssファイルを使用しているかチェックするためにcommitとapp.module.tsファイルを確認することができます。