将sass包文件编译为单独的css文件

Question

我有一个sass模块的文件夹，它有一个main.scss文件，它将上面提到的模块捆绑在一起。所以main.scss文件看起来像这样：

@import 'base/_base.scss'
@import 'abstracts/_mixins.scss'

......等等。

我想用webpack完成的是将main.scss文件编译成CSS并将其保存到一个不同的文件（让我们称之为style.css），它们位于sass modules文件夹之外。

这是我的webpack.config.ts，但是当我更改main.scss时，似乎并没有“更新”style.css。

import * as webpack from 'webpack';
import * as path from 'path';
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';

const config: webpack.Configuration = {
    entry: path.resolve('src/js/main.js'),
    output: {
        path: path.resolve('dist'),
        filename: '[name].js'
    },

    resolve: {
        modules: [
            'node_modules',
            'devtools',
            'src'
        ],

        extensions: ['.ts', '.js']
    },

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

    plugins: [
        new ExtractTextPlugin('style.css')
    ]
}

export default config;