I would like to be able to import CSS in one of my entry chunks (called "vendor") and extract it using the ExtractTextPlugin to a "vendor.css" file.
At the same time I also seek to being able to import arbitrary CSS inside chunks which are getting imported dynamically (using ES6's import()
function).
I can't get both to work:
{
test: /\.css$/,
// do not apply the ExtractTextPlugin in the app folder
exclude: [helpers.root("app"), helpers.root("node_modules")],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: "css-loader",
options: {
minimize: CSSNANO_MINIMIZE_OPTIONS
}
}
})
},
{
test: /\.css$/,
// only apply these to Components in the app folder
include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
use: [
"to-string-loader",
{
loader: "css-loader",
options: {
importLoaders: 1, // 1 loader is applied before the css-loader
minimize: CSSNANO_MINIMIZE_OPTIONS
}
}
]
},
{
test: /\.css$/,
// only apply these to vendor files in the node_modules folder
include: [helpers.root("node_modules")],
exclude: [helpers.root("node_modules/@swimlane/ngx-charts")],
loaders: ["style-loader", {
loader: "css-loader",
options: {
importLoaders: 1, // 1 loader is applied before the css-loader
minimize: CSSNANO_MINIMIZE_OPTIONS
}
}]
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: CSSNANO_MINIMIZE_OPTIONS
}
},
"sass-loader"
]
})
}
}
My vendor.ts (one of the entry chunks) looks like this:
import "font-awesome/css/font-awesome.min.css";
import "vendor/bootstrap/bootstrap.scss";
After the build the vendor.css only contains bootstrap's CSS, but not font-awesome's. If I instead simplify my config to use the ExtractTextPlugin for everything but my Angular 4 components I can no longer dynamically import vendor libraries inside my code:
{
test: /\.css$/,
exclude: [helpers.root("app")],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: "css-loader",
options: {
minimize: CSSNANO_MINIMIZE_OPTIONS
}
}
})
},
{
test: /\.css$/,
include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
use: [
"to-string-loader",
{
loader: "css-loader",
options: {
importLoaders: 1, // 1 loader is applied before the css-loader
minimize: CSSNANO_MINIMIZE_OPTIONS
}
}
]
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: CSSNANO_MINIMIZE_OPTIONS
}
},
"sass-loader"
]
})
}
}
With that configuration something like
require("katex/dist/katex.css");
export default require("katex");
which I import dynamically won't work, I get an exception when opening my site in a browser.
What is wrong with my configuration?
Thanks.
Update: Okay, apparently it is related to a bug in the ExtractTextPlugin: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456