PostCSS

介紹一款幫助您編寫現代 CSS 的優秀工具：PostCSS。PostCSS 是一個非常流行的工具，允許開發者編寫 CSS 預處理器或後處理器。 簡介 為何如此受歡迎 安裝 PostCSS CLI 最受歡迎的 PostCSS 插件 Autoprefixer cssnext CSS Modules csslint cssnano 其他有用的插件 和 Sass 有何不同？ 簡介 PostCSS 是一個工具，允許開發者編寫 CSS 預處理器或後處理器，稱為插件。有許多插件提供了許多功能，有時候 “PostCSS” 這個詞代表的是工具本身，以及插件生態系統。 PostCSS 插件可以通過命令行運行，但通常是在構建時由任務運行程序調用的。 插件化的架構為您所需的所有與 CSS 相關的操作提供了一個共同的基礎。 注意：儘管叫做 PostCSS，它不僅僅是 CSS 後處理器，但它可以用於構建它們，以及其他東西 為何如此受歡迎 PostCSS 提供了幾個功能，可以深度改善您的 CSS，並與您選擇的任何構建工具良好集成。 安裝 PostCSS CLI 使用 Yarn： yarn global add postcss-cli 或者使用 npm： npm install -g postcss-cli 完成之後，postcss 命令將在您的命令行中可用。 例如，此命令將在 css/ 文件夾中包含的 CSS 文件上運行 autoprefixer 插件，並將結果保存在 main.css 文件中：...

如何修復錯誤 ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css 找不到模組 我的一些學員在進行 Next.js 項目的 npm run dev 時遇到了一個我無法重現的問題。 他們遇到了如下錯誤： ➜ rest-api git:(main) npm run dev > [[email protected]](/cdn-cgi/l/email-protection) dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /Users/flaviocopes/dev/bootcamp/rest-api/.env wait - compiling... error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css Error: Cannot find module 'tailwindcss' 最後一行中出現了 tailwindcss，同時還有 autoprefixer 的問題。 還有可能出現這個錯誤：Error: Your custom PostCSS configuration must export a plugins key. 這個錯誤信息其實並不是很有用！ 經過大量的調試，找到了問題的原因。 出現錯誤的項目並沒有安裝 Tailwind CSS，但在之前的幾周，我們使用了 Tailwind。 問題的原因如下：...

本文將解釋如何在文件夾的文件變更時重新運行 package.json 腳本。 我的實際問題是：我希望在文件變更時自動重新生成 CSS，通過 PostCSS 流程進行處理。 我描述的方法將適用於任何類型的自動文件和文件夾監視，而不僅僅是這個特定情況。 我正在運行以下腳本，使用 yarn build:css 命令運行： "scripts": { "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css", } 我希望在 layouts 文件夾中的任何變更發生時重新運行它，該文件夾包含構建我的網站的所有 HTML 文件。 如果您熟悉 Tailwind，它會創建一個稍大的 CSS 文件，其中包含您可能需要的所有內容，並且您可以通過刪除您不使用的任何類來進行優化。 每次我在其中進行更改時，我都希望重新生成 CSS，並觸發我在 PostCSS 設置中設置的清理和最小化過程。 如何實現這一點呢？ 首先，安裝 watch npm 套件： npm install watch 然後在您的 package.json 文件中加入 watch 腳本。您已經有了之前的 build:css，我們只需添加一個監視 layouts 文件夾並在每次變更時運行 build:css 的腳本： "scripts": { "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css", "watch": "watch 'npm run build:css' ./layouts" } 現在運行 npm run watch 或 yarn watch。

我更新了一個舊的 Next.js 應用程式，當我執行 npm run dev 時出現了這個錯誤： error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css Error: Your custom PostCSS configuration must export a `plugins` key. 然後我新增了一個 postcss.config.json 檔案，內容如下： { "plugins": [ ] } 這樣應用程式又開始運作了。

如何解決在 Next.js 網站安裝 Tailwind 時出現「無法解析相依性樹」錯誤的問題 在設置新的 Next.js 專案並使用 Tailwind 時，我遇到了一個問題。 這個問題可能只是一個暫時性的錯誤，由於配置問題和庫的版本，但我想寫下來以便其他人遇到相同問題時能夠參考。 我運行了以下命令： npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes 換句話說，需要 PostCSS 8.1.13，但 Next 安裝的是 8.1.7。 所以我運行了以下命令： npm install [[email protected]](/cdn-cgi/l/email-protection) [[email protected]](/cdn-cgi/l/email-protection) postcss-preset-env postcss-flexbugs-fixes 這樣就解決了問題！