webpack ExtractTextPlugin+sass-loader的使用疑问

Question

打算把.scss的文件单独提取出来，不放在bundle.js里面。用了ExtractTextPlugin插件的配置，如图：

运行npm start

并没有说的那样，生成一个style.css文件，并自动link到index.html中。配置应该没什么问题

Answer 1

这是我的完整的配置

var path = require('path');
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var webpack = require('webpack');
//plugin
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin({
    filename: path.join(__dirname, '..', 'web', 'mobile', 'dist', 'manifest.json')
});
var plugins = [];
var entry = {
    app: './web/mobile/src/index.jsx'
};
if (process.env.NODE_ENV === 'production') {
    plugins = [
        new CleanWebpackPlugin(['dist'], {
            verbose: true,
            root: path.join(__dirname, '..', 'web', 'mobile')
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            minChunks: Infinity
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        new ExtractTextPlugin("[name].[hash].css"),
        assetsPluginInstance
    ];
    entry.vendor = ['react', 'react-router', 'react-dom', 'moment', 'amazeui-touch', 'underscore', 'whatwg-fetch'];
} else {
    plugins = [
        new ExtractTextPlugin("style.css")
    ];
}
module.exports = {
    entry: entry,
    output: {
        publicPath: '/mobile/dist/',
        filename: process.env.NODE_ENV === 'production' ? '[name].[hash].js' : 'mobile.bundle.js',
        path: './web/mobile/dist'
    },
    postcss: function () {
        return {
            defaults: [precss, autoprefixer],
            cleaner: [autoprefixer({browsers: ["ios >= 7", "android >= 4.0"]})]
        };
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    "file?name=img/[hash:16].[ext]",
                    "image-webpack?bypassOnDebug&optimizationLevel=9&interlaced=false"
                ]
            },
            {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss')},
            {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')},
            {test: /\.(eot|svg|ttf|woff)/, loader: 'file?name=fonts/[hash].[ext]'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: plugins
};

使用该插件需要配置plugins和loaders，不要忘记了。

Answer 2

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