パッケージSCSS webpack--

1.npmインストールSASS -loaderノード-sass --save -dev

SASSの同等のアップグレード版の2.scss人気の理解ので、依存プラグインやSASS ノード-loader -sass

SASS書き込まれ、行インデント

#sidebarの
  幅：30％の
  バックグラウンド - カラー：#faaの

書かれたSCSS、ブラケット、セミコロン

#sidebar { 
  幅：30％; 
  背景 - 色：#faa; 
}

SCSS CSSの書き込みと書き込みより類似した（ので、それを理解するために）

3.プロファイル

モジュール：{ 
        ルール：[ 
            { 
                // ES6構文は変換 
                テスト：（。\ JSX | \の.js）/ $ / 、
                使用：{ 
                    ローダー：" バベル・ローダー" 、
                    オプション：{ 
                        プリセット：[ 
                            " ENV " 
                        ] 
                    } 
                } 、
                除外する： node_modules / / //は変換ディレクトリを除外
            }、{ 
                テスト： /\.css$/ 、
                 / * 
                使用：[{
                    ローダ： 'スタイルローダ/ URL ' // スタイル・ローダを使用して処理は、位置は、CSS-ローダに先行しなければならない
                }、{ 
                    'CSS-ローダ' //使用CSS-ローダプロセス：ローダ
                }] 
                //使用します：[ 「スタイル・ローダー」、「CSSの -loader」] // ここにも記述することができる
                * / 
               使用を：ExtractTextWebpackPlugin.extract（{ 
                    フォールバック：{ // 設定の種類は、CSSを処理するために使用されるとき、ここには抽出を意味しない 
                        ローダーを：「スタイル・ローダー」、
                        オプション：{ 
                            シングルトン：真に //がすべてのページのCSSスタイルタグ内に配置されている表し
                        } 
                    }、
                    使用：[// 抽出時間、処理は以下のように続け
                        { 
                            ローダー：' CSS-ローダー' 、
                        } 
                    ] 
               }）
            }、{ 
                テスト： /\.scss$/ 、
                使用：ExtractTextWebpackPlugin.extract（{ 
                    使用：[ ' css-ローダ' ' サス・ローダ' ] 
                }）
            } 
        ] 
        
    }、

おすすめ