Помогите с webpack.
У меня есть 2 js файла, точки входа. Они используют несколько одинаковых css файлов. Я бы хотел избежать дублирования и сохранять код общих css файлов в один бандл common.css
. Сейчас файлы сохраняются в css файл с именем js файла точки входа.
Что нужно сделать?
npm i —save-dev postcss-loader
в корень проекта postcss.config.js :
недостающие
'cssnano' 'autoprefixer' 'postcss-discard-overridden'
установи через
npm
. из них нужен
cssnano
точно, остальные - не помню
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-discard-overridden'),
require('cssnano')({
preset: [
'default', {
discardComments: {
removeAll: true,
}
}
]
})
]
}
webpack.config.js:
здесь важен только
'postcss-loader'
и порядок, в котором он относительно других лоадеров:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'postcss-loader'
]
},
Не используй
.css
для
postcss
, он с ними не работает, используй препроцессор saas (.scss). И вообще забей на
.css
.