角度アプリのwebpackでscssをコンパイル

Question

私の角型アプリにwebpack 3を使用しています。私は自分のscssファイルをコンパイルするいくつかの問題があります。

const path = require('path') 
const autoprefixer = require('autoprefixer') 
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin') 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

const config = { 
    context: __dirname + '/src', 
    entry: { 
    app: './index.js', 
    vendor: [ 
     'angular', 
     'angular-animate', 
     'angular-bootstrap', 
     'angular-route', 
     'animate', 
     'bootstrap', 
     'bootstrap-filestyle', 
     'jquery', 
     'ng-file-upload', 
     'ng-parallax' 
    ] 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'app'), 
    publicPath: path.join(__dirname, 'app') 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx', '.scss'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css?minimize!postcss!sass') 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/, 
     loader: 'file?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|gif|png|svg)$/, 
     loader: 'file?name=images/[name].[ext]' 
     } 
    ], 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['env'] 
      } 
     } 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'url-loader' 
     }, 
     { 
     test: /\.php$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
     { 
     test: /\.zip$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
     { 
     test: /(\.png|\.jpg|\.gif)$/, 
     loader: 'file-loader?name=[path][name].[ext]' 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('./bundle.css'), 
    new CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.bundle.js' 
    }), 
    new UglifyJSPlugin({}) 
    // new ExtractTextPlugin({ 
    // filename: '[name].min.css' 
    // }) 
    ] 
} 

module.exports = config 

私はこのエラーを持っているのWebPACKを実行した後：ここでは、フルWebPACKの設定ファイルがある

ERROR in ./assets/sass/main.scss 
Module parse failed: /home/git/project/src/public/src/assets/sass/main.scss Unexpected token (1:13) 
You may need an appropriate loader to handle this file type. 
| $header-color: #ffffff; 
| $admin-panel-height: 40px; 
| 
@ ./index.js 3:0-34 

また、私は、このローダーを使用しようとしました：https://github.com/webpack-contrib/sass-loader

WebPACKのがエラーを構築していない後cssファイルも/ appフォルダには作成されませんでした。 index.jsで

ファイルmain.scssの輸入：

import './assets/sass/main.scss' 

誰も私に私が構築し、WebPACKの3とSCSSファイルを見ることができますどのようなアドバイスを与えることができますか？

Answer 1

webpack 1のローダコンフィグを使用しています。

設定のセクションこと：あなたがWebPACKの2（または3）に移動したときに

loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css?minimize!postcss!sass') 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/, 
     loader: 'file?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|gif|png|svg)$/, 
     loader: 'file?name=images/[name].[ext]' 
     } 
    ], 

あり、変更を壊しています。 これらのうちの1つはmodule.loaders => module.rulesでした。 そのセクションを新しい構造に変換する必要があります。

さらに、ExtractTextPluginも同様に設定スタイルを変更します（please read it README）。