提取文本插件不从 .scss 中提取 css

Question

我有以下 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 加载器（我使用的是很棒的 typescript 加载器），它也能正常工作。但是，当我包含以下内容时

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

然后生成了额外的 css。

提取文本插件不从 .scss 中提取 css

extract text plugin not extracting css from .scss

sass

webpack

extract-text-plugin