Chris Talman
Chris Talman

Reputation: 1169

Can ExtractTextPlugin work with `ts-loader`?

I have been using ts-loader in Webpack. I would like to also use ExtractTextPlugin in combination with css-loader to bundle CSS. However, ExtractTextPlugin seems to be ignored, or overridden, when ts-loader is used alongside it. I have included an example webpack.config.js below. Is it possible to fix this problem?

{
    entry: './src/app.ts',
    resolve:
    {
        extensions:
        [
            '.js',
            '.html',
            '.css'
        ]
    },
    output:
    {
        filename: 'app.js',
        path: path.resolve(__dirname, 'deploy')
    },
    watch: true,
    watchOptions:
    {
        ignored: /node_modules/
    },
    module:
    {
        rules:
        [
            {
                use: ExtractTextPlugin.extract(
                {
                    fallback: 'style-loader',
                    use: 'css-loader'
                }),
                test: /\.css$/,
                exclude: /node_modules/
            },
            {
                loader: 'ts-loader',
                test: /\.tsx?$/,
                exclude: /node_modules/
            },
            {
                loader: 'svelte-loader',
                test: /\.html$/,
                exclude: /node_modules/
            }
        ]
    },
    plugins:
    [
        new ExtractTextPlugin(
        {
            filename: 'app.css',
            allChunks: true
        })
    ]
}

Update

It seems that ExtractTextPlugin is not run in this context when there are TypeScript errors. This can be solved by fixing those errors. A less elegant solution is to change the file in which styles are imported from .ts to .js. This removes it from TypeScript, and so errors do not prevent ExtractTextPlugin from running.

Upvotes: 0

Views: 133

Answers (0)

Related Questions