php - 如何在 PHP 中使用 CSSModules(非 SPA)

Question

所以我想在常规 PHP 项目(更具体地说是 wordpress 主题)中使用 CSSModules 的好处。我正在使用带有 autoprefixer、browsersync、postcss 等的 webpack 在开发时编译和热重载项目的部分内容。我知道还有一个名为 postcss-modules 的 postcss 插件我想使用它。

该插件正在向我所有的 css 类添加散列，并按预期输出带有映射的 json。现在我想将一个 css 模块(这是一个未编译的 scss 文件)绑定(bind)到每个 php 文件(就像在 React 中使用 css 模块时所做的那样)。我应该怎么做？我仍然希望 css 在编译后能够抵抗在一个大文件中。

这是我的 webpack 配置的一部分:

  {
    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 作为 webpack 的入口点。 style.scss 然后导入所有部分 scss 文件(每个应该是一个 css 模块)。

Answer 1

我做了一个really good writeup关于如何做这一切。唯一的区别是我使用 grunt-postcss 而不是 Webpack 来处理 postcss 插件和功能。将概念移植到 Webpack 应该很简单。

关键是配置 postcss-modules 以将单独的 pcss 文件作为模块处理。这样你就可以为每个模块分别解析 JSON。使用 globalModulePaths 你可以保持你的主 pcss 完好无损并将你的模块附加到它。