Webpack - 使用SMACSS sorting order

之前有一篇文章介紹了在 VScode 裡使用 PostCSS Sorting﹐最近在整理webpack plugin﹐順便寫下如何在 webpack 使用 SMACSS sorting order 吧。

在 webpack 安裝 stylelint

yarn add stylelint -D
yarn add stylelint-webpack-plugin -D

更改 webpack.config.js

const StylelintPlugin = require("stylelint-webpack-plugin");

module.exports = {
  plugins: [
    new StylelintPlugin({
      configFile: "stylelint.config.js",
      fix: true,
    }),
  ],
};

安裝 SMACSS sorting order

yarn add stylelint-config-property-sort-order-smacss -D

建立 stylelint.config.js

vim stylelint.config.js

內容如下：

const sortOrderSmacss = require("stylelint-config-property-sort-order-smacss/generate");

module.exports = {
  root: true,
  plugins: ["stylelint-order"],
  rules: {
    "order/properties-order": [sortOrderSmacss()],
  },
};

當 build webpack 的時候，就會自動 sorting css 裡的 order 了 🎉。