Así que quiero usar los beneficios de CSSModules en un proyecto PHP normal (un tema de wordpress para ser más específicos). Estoy usando webpack con autoprefixer, browsersync, postcss y más para compilar y recargar en caliente partes del proyecto durante el desarrollo. Entiendo que también hay un complemento para postcss llamado postcss-modules que me gustaría usar.
El complemento agrega hashes a todas mis clases de css y genera un json con las asignaciones, como se esperaba. Ahora me gustaría vincular un módulo css (que es un archivo scss sin compilar) a cada archivo php (como lo haría al usar módulos css en React). ¿Cómo debería hacer esto? Todavía me gustaría que el css resistiera en un archivo grande después de compilar.
Esta es una parte de la configuración de mi paquete web:
{ test: /\.(scss|css)$/, use: extractSass.extract({ use: [{ loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: function () { return [ require('precss'), require('autoprefixer'), require('cssnano'), require('postcss-modules') ]; } } }, { loader: "sass-loader" }], fallback: "style-loader" }) },Y estoy usando un main.js y un style.scss como punto de entrada en el paquete web. Luego, style.scss está importando todos los archivos scss parciales (que deberían ser un módulo css cada uno).
Hice un artículo muy bueno sobre cómo hacer todo esto. La única diferencia es que estoy usando grunt-postcss en lugar de Webpack para manejar los complementos y la funcionalidad de postcss. Debería ser sencillo trasladar los conceptos a Webpack.
La clave es configurar postcss-modules para manejar los archivos pcss separados como módulos. De esa manera, puede analizar el JSON por separado por módulo. Al usar globalModulePaths, puede mantener intactas sus PC principales y agregarle sus módulos.