Я использую Angular 6 Framework вместе с модулем Webpack 4. У меня есть 2 файла конфигурации webpack.
Глобальные стили приложения размещаются внутри пути «Содержимое / Стили». Каждый угловой стиль компонента помещается в соответствующую папку компонента внутри пути «scripts / app». например, «scripts / app / dashboard / dashboard.component.scss»
Общая конфигурация Webpack содержит следующее правило для файлов 'scss'.
webpack.common.js:
module: {
rules: [
...
{
test: /\.scss$/,
use: ["to-string-loader", "css-loader", "sass-loader"],
exclude: [helpers.root("Content", "Styles")]
},
....
]
}
Настройка Webpack dev содержит следующее правило для глобальных файлов 'scss'.
webpack.dev.js:
module: {
rules: [
...
{
test: /\.scss$/,
include: [helpers.root("Content", "Styles")],
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: {
safe: true
}
}
},
{
loader: "postcss-loader",
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require("precss"),
require("autoprefixer")
];
}
}
},
{
loader: "sass-loader",
options: {}
}
]
},
....
]
}
Я хотел бы добавить извлеченный глобальный CSS-файл в index.html. Проблема в том, что правило dev не применяется, когда у меня есть опция include. Когда эта опция отсутствует, правило применяется ко всем файлам scss моего приложения, создавая файл 'css', содержащий также все стили компонентов. Может кто-нибудь сказать мне, что я делаю не так?