Webpack Błędy Uglify w CSS

Question

Podkreślam, że próbuję sprawić, aby Uglify pracował z moim projektem, wcześniej użyłem Uglify i nie dawałem problemów, ale teraz myślę, że jest to związane z 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 
... 
... 

Ten błąd powtarza się wiele razy, po jednym na każdy pakiet wielokrotny.

To jest moja konfiguracja Web Pack.

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

Jeśli skomentuję wiersz uglifyJsPlugin, nie ma błędów. Ale muszę zminimalizować i nie ma sposobu, aby go uruchomić, próbowałem mangler: fałsz i nic, nie działa.

Answer 1

Próbujesz przekazać pliki CSS za pośrednictwem wtyczki UglifyJs, która nie jest obsługiwana.

Aby zgnieść tylko swoje źródła JS, można filtrować na podstawie rozszerzenia pliku.

Poniższy przykład będzie zeszpecić tylko pliki, które miały .js lub .jsx rozszerzenie:

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

Answer 2

wkładacie plików SCSS jako część swojego punktu wejścia. W pakiecie internetowym częstszą praktyką jest wymaganie plików, których potrzebujesz (SCSS mądry) wewnątrz plików JS.

// 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'; 
} 

Następnie należy skonfigurować moduł Sass-Loader do wykrywania i obsługi żądań, które zostały już wykonane za pomocą następującego programu ładującego.

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