У меня проблемы с пониманием того, как компилировать и минимизировать мои файлы css в css, сохраняя при этом ту же структуру папок и файлов. Я использую MiniCssExtractPlugin для извлечения всего, а также style-loader, css -loader, post css -loader и sass-loader
Вот структура файла в моей папке sr c
app.scss содержит весь импорт. импорт из папок 1-7. Сначала у меня возникают проблемы с импортом, а затем возникают проблемы с компиляцией и минимизацией оставшихся файлов s css.
Конечная цель состоит в том, чтобы скомпилированная папка выглядела так, чтобы каждый файл был свернут и приложение было свернуто. s css связывает все импортные данные
Ниже приведен фрагмент кода, который у меня есть для webpack.config. js
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
})
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
]
}
]
},
optimization: {
minimizer: [new TerserJSPlugin({extractComments: false}), ],
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](lodash)[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
При запуске этого кода я просто получаю файл приложения. css в папке css, в который не включен импорт, и другие файлы также не включены. Может ли кто-нибудь помочь мне понять процесс, который мне нужен? Я проверил все документы для каждого загрузчика и не совсем понял, что я ищу.
Спасибо!