Webpack — Как использовать CSSModules в PHP (не SPA)

Поэтому я хочу использовать преимущества CSSModules в обычном PHP-проекте (тема WordPress будет более конкретной). Я использую webpack с autoprefixer, browsersync, postcss и многим другим для компиляции и горячей перезагрузки частей проекта во время разработки. Я понимаю, что есть также плагин для postcss под названием postcss-модули который я хотел бы использовать.

Плагин добавляет хэши ко всем моим классам CSS и выводит json с отображениями, как и ожидалось. Теперь я хотел бы привязать один модуль CSS (который является нескомпилированным файлом scss) к каждому файлу php (как вы это сделали бы при использовании модулей CSS в React). Как мне это сделать? Я все еще хотел бы, чтобы css сопротивлялся в одном большом файле после компиляции.

Это часть моего конфига веб-пакета:

  {
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"})
},

И я использую main.js и style.scss в качестве точки входа в веб-пакет. Затем style.scss импортирует все частичные scss-файлы (каждый из которых должен быть по одному модулю css).

1

Решение

Я сделал действительно хорошая рецензия о том, как сделать все это. Единственное отличие состоит в том, что я использую grunt-postcss вместо Webpack для обработки плагинов и функциональности postcss. Должно быть просто перенести концепции в Webpack.

Ключом является настройка postcss-модулей для обработки отдельных файлов pcss как модулей. Таким образом, вы можете анализировать JSON отдельно для каждого модуля. Используя globalModulePaths, вы можете сохранить ваши основные pcss нетронутыми и добавить свои модули к нему.

0

Другие решения

Других решений пока нет …