Reputation: 1169
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