提取文本插件不是从.scss

Question

我已经提取的CSS以下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 }) 
    ] 
}; 

然而，当我运行此，应生成CSS文件中不会出现。我正在使用extract-text-webpack-plugin，但这不起作用。它不会抛出错误，但它也不起作用。

Answer 1

好吧我得到这个工作，原因是在我的根应用程序组件（angular2）我有以下指的主要样式表。

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

即使没有scss加载程序（我正在使用真棒打字机加载程序），这工作得很好。然而，当我包括以下内容

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

然后额外的css得到生成。

Answer 2

您正尝试从导入的模块中提取，而不是从ExtractTextPlugin实例本身提取。你需要做的是实例化一个新的ExtractTextPlugin对象，并在插件和装载器中使用它。

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