如何在PHP中使用CSSModules（非SPA）

所以我想在常规PHP项目中使用CSSModules的好处（更具体的wordpress主题）。我正在使用webpack与autoprefixer，browsersync，postcss等编译和热重新加载部分项目，同时开发。我知道还有一个插件可以用于我想要使用的名为postcss-modules的postcss。如何在PHP中使用CSSModules（非SPA）

该插件正在为我所有的css类添加哈希，并按照预期输出带映射的json。现在我想将一个css模块（这是一个scss文件未编译）绑定到每个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模块）。

来源

2017-04-01 theva

-1

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

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

来源

2017-11-30 10:46:03

一个潜在的解决方案的链接永远是受欢迎的，但你到目前为止放在这里是真正的最低限度，可能被认为是一个答案。因此，我不会惊讶地看到一些人对这个答案投了赞成票。虽然我知道你已经存在的写作仅仅是类似的，而不是OP所要求的，但总比现在要多一些。因为这样，它真的更像是一个评论而不是一个答案，但它当然是在成为答案的途中。 – Makyen

这里的人们对于链接到（推广）他们自己的网站的用户往往非常敏感。如果你要链接到你自己的网站，你应该阅读：[什么意思是“良好”的自我推销？]（// meta.stackexchange.com/q/182212）和[如何不成为垃圾邮件制造者]（/ /stackoverflow.com/help/promotion）。有可能做好链接到您自己的网站的工作。只要意识到这是人们可能会跳到你身上的事情，如果你，即使是错误的，最终也不会遵循上述链接中的内容。祝你好运。 – Makyen

谢谢您的反馈Makyen。我会喜欢评论而不是回答，但不幸的是我没有足够的代表来这样做。我老实说只是试图帮助。如果别人有更好的答案，请将我的投票记录下来。在此之前，我真的希望这可以帮助有人找到可行的解决方案。我找不到答案，所以我做了一个答案。 –

如何在PHP中使用CSSModules（非SPA）

回答

相关问题