如何仅内联页面实际用到的CSS而非加载完整框架，实现AMP兼容？

方案1：Webpack + PurgeCSS 自动提取必要CSS #

这个方案不需要你懂Sass，也不用手动改样式，完全自动化处理：

• 先安装依赖：npm install purgecss-webpack-plugin mini-css-extract-plugin css-loader sass sass-loader html-webpack-plugin html-inline-css-webpack-plugin --save-dev
• 在Webpack配置中引入PurgeCSS插件，配置扫描路径指向你所有的HTML/页面文件，插件会自动识别你用到的row、col s12 m12 l6、容器、基础字体等类名，只保留这些类对应的Materialize样式，删除所有未使用的代码，最终输出的精简CSS一般只有几KB，远小于AMP要求的75KB内联CSS上限。
• 配合html-inline-css-webpack-plugin插件，可以直接把生成的CSS自动内联到HTML的<head>标签里，不需要手动操作，完全符合AMP不能引入外部CSS资源的要求。

方案2：按需引入Materialize模块化样式 #

如果你后续可能新增少量Materialize样式，可以用这个方案，体积控制更灵活：

• 新建自定义的SCSS入口文件，只引入你需要的模块，不需要导入全量Materialize：

// 基础必备样式
@import "~materialize-css/sass/components/variables";
@import "~materialize-css/sass/components/normalize";
@import "~materialize-css/sass/components/typography";
// 你用到的栅格系统
@import "~materialize-css/sass/components/grid";

• 用Webpack的sass-loader正常编译即可，出来的CSS只有你导入的模块内容，再用上面提到的内联插件处理就行，Sass部分不需要你额外写代码，只要调整导入的模块列表就可以。

更适配AMP的替代思路 #

如果你不想依赖Materialize，也可以直接用AMP原生布局能力实现你要的效果：AMP自带响应式布局规则，不需要额外引入第三方栅格CSS，你现有页面的三端响应式列布局用AMP的layout属性就能实现，完全规避第三方CSS的冗余问题，更符合AMP的最佳实践。

内容的提问来源于stack exchange，提问作者user2357169