0

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.

Chris Talman
  • 1,059
  • 2
  • 14
  • 24
  • They do not interfere in any way. The config you posted does not reproduce your problem (it works fine). Please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) or post your concrete config (at least the relevant bits). – Michael Jungo Jul 07 '17 at 15:29
  • @MichaelJungo Thanks for your response. What would be relevant? package.json, tsconfig.json? – Chris Talman Jul 07 '17 at 15:45
  • Only the webpack config should be needed. I was mainly referring to the `Verifiable` part. – Michael Jungo Jul 07 '17 at 15:46
  • I recreated the conditions in a new folder and the CSS was not generated. It crossed my mind - could this be because several TypeScript errors are thrown? The output is perfectly fine, it's just that TypeScript does not understand certain parts of the code, and therefore throws errors. – Chris Talman Jul 07 '17 at 16:01
  • If there are any errors, the build was not successful. Webpack does not abort automatically after one error unless you use the [`bail` option](https://webpack.js.org/configuration/other-options/#bail). You need to fix these errors first until it builds successfully. – Michael Jungo Jul 07 '17 at 16:05
  • So, just to be clear, have we essentially established that `ExtractTextPlugin` is not running because `ts-loader` throws errors? – Chris Talman Jul 07 '17 at 16:11
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148621/discussion-between-bluecewe-and-michael-jungo). – Chris Talman Jul 07 '17 at 16:13

0 Answers0