如何在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）

回答

相關問題