Angular2 - WebpackでSassを統合

Question

angular CLI（@ 1.0-webpack.2）を使って新しいangular2プロジェクトを作成しました。

Sassを私のプロジェクトに統合したいと思います。私が知っている

こと：

• 私はそれは私がprefferたい何include SCSS in ng2 components

することが可能です。この

ためgulpを使用することができますのための特定のディレクトリを持つことです.scssファイルは、変更後に「監視」してコンパイルする必要があります。.tsng serve（端末）の後のファイル。

はあなたがdistにindex.htmlを移動する必要があり

Answer 1

でこの時点で（8月25日）これは不可能ですが、次のリリースのangle-cliでは可能です。

angle-cli.jsonファイルには、参照ファイルがアプリケーションに含まれるスタイルファイルへのパスの配列になるプロパティー名stylesがあります。 「角度/ CLI @」新がリリースされているので、あなたは私が

Answer 2

ありがとうございます。あなたはSCSSがあなたのWebPACKのビルドに組み込む組み込みたい場合は、お使いのWebPACKの設定に以下を追加します。

{ 
    output: { 
     filename: './dist/[name].js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       exclude: './app', 
       loader: ExtractTextPlugin.extract('style', 'css') 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['exports-loader?module.exports.toString()', 'css', 'sass'] 
      } 
     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin('./styles.css') 
    ] 
}; 

あなたはその後、NG2のコンポーネントでscssファイルを含めることができstyles: [require('path-to-scss')]