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 文件中:...

在React中使用SASS

如何使用SASS來設計React應用程式 當你使用create-react-app來建構React應用程式時,你有很多選擇來進行樣式設計。 當然,如果你不使用create-react-app,你有無數的選擇,但我們只討論create-react-app提供的選項。 你可以使用普通的class和CSS檔案、使用style屬性或CSS模組來進行樣式設計。 SASS/SCSS是非常流行的選項,許多開發人員喜愛使用它。 你可以在create-react-app 2版本中完全不需要任何配置就可以使用它。 你只需要一個.sass或.scss檔案,然後在組件中引入它: import './styles.scss' 你可以在https://codesandbox.io/s/18qq31rp3看到它正常運作的範例。