Extrakt Text-Plugin nicht css Extrahieren von .scss

Question

Ich habe folgende webpack.cofig.js

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

module.exports = { 
    entry: { 
    app: './src/main.ts', 
    polyfills: './src/polyfills.ts' 
    }, 
    output: { 
    path: path.resolve('dist'), 
    filename: '[name].js', 
    publicPath: 'assets/' 
    }, 
    resolve: { 
    // only discover files that have those extensions 
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'], 
    }, 
    module: { 
    rules: [{ 
     test: /\.ts$/, 
     exclude: /node_modules/, 
     loader: 'awesome-typescript-loader' 
    }, 
    {   
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader', 'sass-loader'] 
     }) 
    }, 
    { 
     test: /\.html$/, 
     loader: 'html-loader' 
    }, 
    { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file-loader?name=fonts/[name].[hash].[ext]?' 
    } 
    ] 
    }, 
    plugins: [  
    new ExtractTextPlugin({ filename: 'mystyle.css', disable: false, allChunks: true }) 
    ] 
}; 

jedoch Datei, wenn ich dies ausführen, wird die CSS-Datei, die erstellt werden soll nicht angezeigt. Ich benutze extract-text-webpack-plugin aber das funktioniert nicht. Es wird kein Fehler ausgegeben, es funktioniert jedoch auch nicht.

Answer 1

Ok ich diese an die Arbeit, war der Grund, dass in meinem root app Komponente (angular2) I für die Bezugnahme auf das Hauptsheet die folgende hatte.

styleUrls: ['./app.component.scss'], 

Das hat gut funktioniert auch ohne die SCSS Lader (I die ehrfürchtige Typoskript loader bin mit). Allerdings, wenn ich unter anderem folgende

const styles = require('./app.component.scss'); 

Dann wird die zusätzliche CSS wurde erzeugt.

Answer 2

Sie versuchen, das importierte Modul zu extrahieren und nicht von einer ExtractTextPlugin-Instanz selbst. Was Sie tun müssen, ist ein neues ExtractTextPlugin-Objekt zu instanziieren und es sowohl in den Plugins als auch im Loader zu verwenden.

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const CssMain = new ExtractTextPlugin({ filename: 'mystyle.css', disable: false, allChunks: true }); 

.... 
module: { 
    rules: [ 
    .... 
    {   
     test: /\.scss$/, 
     use: CssMain.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader', 'sass-loader'] 
     }) 
    } 
    .... 
    ] 
}, 
plugins: [ 
    .... 
    CssMain 
    .... 
] 
....