如何解决使用 postcss-loader 和 webpack - 为什么带有 post CSS 的 bundle 如此之大?
我正在使用 webpack 可视化工具来检查我的生产包。我正在使用 Webpack v5 并使用 mini-css-extract-plugin
、css-loader
和 postcss-loader
处理 CSS。但是,在检查包时,postcss-loader
消耗了大约 240Kb。
我有一个导入所有其他 CSS 文件的主 CSS 文件,我相信这个文件正在被转换为 JavaScript(而不是 CSS)。
我的 CSS 处理方式如下:
{
test: /\.css$/i,use: [ MiniCssExtractPlugin.loader,'css-loader','postcss-loader' ],},
以及我用于 CSS 的插件:
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',}),
这是我的postcss.config.js
:
module.exports = {
plugins: {
'postcss-import': {},'postcss-custom-media': {},'postcss-normalize': {},}
你可以看到我也在使用一些 post CSS 插件。
这就是 index.css
的样子:
@import './colors.css';
@import './media-queries.css';
@import './vendor.css';
@import './components/index.css';
body {
font-family: var(--base-font);
font-size: 14px;
background-color: var(--gray-color-100);
padding: 0;
margin: 0;
height: 100%;
}
@media (--mobile-large-screen) {
body {
font-size: 16px;
}
}
#root {
height: 100%;
}
我认为通过使用 mini-css-extract-plugin
我可以设法将所有 CSS 移动到常规样式表。为什么那个文件在我的 JS 包中?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。