feat: switch to SCSS and add Stylelint

.fes.js

@@ -1,4 +1,5 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
+import StylelintPlugin from 'stylelint-webpack-plugin'
 
 export default {
   publicPath: './',
@@ -30,4 +31,11 @@ export default {
       ['1', '有效的'],
     ],
   },
+  chainWebpack(config) {
+    config.plugin('stylelint').use(StylelintPlugin, [
+      {
+        extensions: ['css', 'scss', 'vue', 'tsx'],
+      },
+    ])
+  },
 }

.stylelintrc.js

@@ -0,0 +1,25 @@
+const commonExtends = ['stylelint-config-property-sort-order-smacss']
+
+module.exports = {
+  ignoreFiles: 'src/{.fes,.fes-production}/**/*',
+  extends: commonExtends,
+  rules: {
+    'order/properties-alphabetical-order': null,
+    'color-named': 'always-where-possible',
+    'selector-max-id': 1,
+  },
+  overrides: [
+    {
+      files: 'src/**/*.css',
+      extends: ['stylelint-config-recommended', ...commonExtends],
+    },
+    {
+      files: 'src/**/*.scss',
+      extends: ['stylelint-config-recommended-scss', ...commonExtends],
+    },
+    {
+      files: 'src/**/*.vue',
+      extends: ['stylelint-config-recommended-vue/scss', ...commonExtends],
+    },
+  ],
+}

package.json

@@ -4,14 +4,16 @@
   "description": "A fes.js + TypeScript starter template",
   "scripts": {
     "build": "fes build",
-    "prod": "FES_ENV=prod fes build",
+    "prod": "cross-env FES_ENV=prod fes build",
-    "analyze": "ANALYZE=1 fes build",
+    "analyze": "cross-env ANALYZE=1 fes build",
     "dev": "fes dev",
     "test:unit": "fes test:unit",
     "lint": "npm run eslint && npm run stylelint",
     "lint:fix": "npm run eslint:fix && npm run stylelint:fix",
-    "eslint": "npx eslint src/**/*.{js,ts,tsx,vue}",
+    "eslint": "eslint src/**/*.{js,ts,tsx,vue}",
-    "eslint:fix": "npx eslint src/**/*.{js,ts,tsx,vue} --fix"
+    "eslint:fix": "eslint src/**/*.{js,ts,tsx,vue} --fix",
+    "stylelint": "stylelint src/**/*.{css,scss,vue,tsx}",
+    "stylelint:fix": "stylelint src/**/*.{css,scss,vue,tsx} --fix"
   },
   "prettier": "@daotl/prettier-config",
   "keywords": [
@@ -38,7 +40,15 @@
     "@daotl/eslint-config-vue": "0.2.3",
     "@daotl/prettier-config": "^0.1.2",
     "@daotl/tsconfig": "^0.0.4",
-    "@vue/compiler-sfc": "^3.2.26"
+    "@fesjs/plugin-sass": "^2.0.0",
+    "@vue/compiler-sfc": "^3.2.26",
+    "cross-env": "^7.0.3",
+    "postcss-html": "^1.3.0",
+    "stylelint": "^14.2.0",
+    "stylelint-config-property-sort-order-smacss": "^8.0.0",
+    "stylelint-config-recommended-scss": "^5.0.2",
+    "stylelint-config-recommended-vue": "^1.1.0",
+    "stylelint-webpack-plugin": "^3.1.0"
   },
   "dependencies": {
     "@fesjs/fes": "^2.0.11",

src/components/PageLoading.vue

@@ -9,14 +9,14 @@ import Spin from 'ant-design-vue/lib/spin'
 import 'ant-design-vue/lib/spin/style/css'
 </script>
 
-<style>
+<style scoped lang="scss">
 .page-loading {
+  display: flex;
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
-  display: flex;
+  left: 0;
   align-items: center;
   justify-content: center;
 }

src/components/UserCenter.vue

@@ -9,9 +9,9 @@ import type { State } from '~/app'
 const initialState = useModel('@@initialState') as State
 </script>
 
-<style scope>
+<style scope lang="scss">
 .right {
-  text-align: right;
   padding: 0 20px;
+  text-align: right;
 }
 </style>

src/global.scss

@@ -0,0 +1 @@
+// Global style