ウェブパックUglifyのエラーCSS

Question

私は自分のプロジェクトでUglifyを動作させることを強調しましたが、以前はUglifyを使用していましたが問題はありませんでしたが、今はSASSに関係しています。

ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss 
    Module build failed: TypeError: Cannot read property '4' of undefined 
     at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23) 
     at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22) 
     at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5) 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26 
... 
... 

このエラーは、複数のバンドルごとに1回、多くの回数繰り返されます。

これは私のwebpack設定です。

var webpack = require('webpack') 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    context: __dirname, 
    resolve: { 
    modulesDirectories: ['node_modules', 'bower_components'] 
    }, 
    entry: { 
    'all': [ 
     './app/global-all.js', 
     './app/scss/global-all.scss' 
    ], 
    'footer': [ 
     './app/global-footer.js', 
     './app/scss/global-footer.scss' 
    ], 
    'header': [ 
     './app/global-header.js', 
     './app/scss/global-header.scss' 
    ], 
    'footer.nodeps': [ 
     './app/global-footer-nodeps.js', 
     './app/scss/global-footer-nodeps.scss' 
    ], 
    'header.nodeps': [ 
     './app/global-header-nodeps.js', 
     './app/scss/global-header-nodeps.scss' 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'js/global.[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style','css!sass!') 
     }, 
     { 
     test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|png)$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     } 
    ], 
    }, 
    plugins: [ 
    new webpack.EnvironmentPlugin([ 
     'NODE_ENV' 
    ]), 
    new ExtractTextPlugin('css/global.[name].css'), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary.html', 
     inject: false, 
     filename: 'secondary.html' 
    }), 
     new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-transparent.html', 
     inject: false, 
     filename: 'secondary-transparent.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-academy.html', 
     inject: false, 
     filename: 'secondary-academy.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/hero-stage.html', 
     inject: false, 
     filename: 'hero-stage.html' 
    }), 

    // Only minify in build, check npm tasks 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: false, 
     mangle: false 
    }), 
    ] 
}; 

私がuglifyJsPlugin行にコメントすると、エラーはありません。 しかし、私は細身化をしなければならないし、実行する方法はありません、私はmanglerを試した：falseと何も、動作しません。

Answer 1

UglifyJsプラグインを使用してCSSファイルを渡そうとしていますが、これはサポートされていません。

JSソースのみを醜くするには、ファイル拡張子に基づいてフィルタリングすることができます。

次の例では、唯一の.jsまたは.jsx拡張子を持っていたファイルをUglifyう：あなたは、あなたのエントリポイントの一部として、SCSSファイルを入れている

new webpack.optimize.UglifyJsPlugin({ 
    sourceMap: false, 
    mangle: false, 
    test: /\.(js|jsx)$/ 
}) 

Answer 2

。 webpackでは、JSファイルの中に必要なファイル（SCSS）を必要とするのがより一般的な方法です。

// Here, the ExtractTextPlugin will use sass-loader to extract and compile styles 
require('styles.scss'); 

// The rest of your code goes here 
// For instance, app.js 
function someCode() { 
    document.body.style.backgroundColor = 'blue'; 
} 

次に、sass-loaderを設定して、次のローダーですでに行ったrequireステートメントを検出して処理します。

あなたのエラーはそれほど `テストの追加CSSを参照してください

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style','css!sass!') 
}