Webpack Uglify Fehler in CSS

Question

Im gestresst zu versuchen, Uglify arbeiten mit meinem Projekt machen, zuvor habe ich Uglify verwendet und gab keine Probleme, aber jetzt denke ich, dass SASS verwandt ist.

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

Dieser Fehler wird oft wiederholt, einer für jedes Mehrfachbündel.

Dies ist meine Webpack-Konfiguration.

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 
    }), 
    ] 
}; 

Wenn ich die UglifyJsPlugin-Zeile kommentieren, ist keine Fehler. Aber ich muss Minification tun und ist keine Möglichkeit, es laufen zu lassen, versuchte ich Mangler: falsch und nichts, funktioniert nicht.

Answer 1

Sie versuchen, CSS-Dateien über das UglifyJs-Plugin zu übergeben, das nicht unterstützt wird.

Um nur Ihre JS-Quellen zu egifizieren, können Sie basierend auf der Dateierweiterung filtern.

Das folgende Beispiel würde nur uglify Dateien, die eine .js oder .jsx Verlängerung hatte:

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

Answer 2

Sie setzen SCSS Dateien als Teil Ihrer Eintrittspunkt. In Webpacks ist es gängiger, die benötigten Dateien (SCSS-weise) in Ihren JS-Dateien zu speichern.

Dann richten Sie den Sass-Loader ein, um diejenigen Require-Anweisungen zu erkennen und zu bearbeiten, die Sie bereits mit dem folgenden Loader durchgeführt haben.

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