feat: 支持css modules

docs/zh/guide/css.md

@@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
 </style>
 ```
 
+## CSS Modules
+支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
+```vue
+<style module>
+.layout-content {
+  max-width: 1000px;
+}
+```
+如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
+```js
+import style from '@/styles/index.module.css'
+console.log(style)
+```
+
 ## CSS 预处理器
 Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。

packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js

@@ -21,8 +21,7 @@ function createRules({
     options,
     browserslist
 }) {
-    const rule = webpackConfig.module.rule(lang).test(test);
-
+    function applyLoaders(rule, isCSSModules) {
         if (isDev) {
             rule.use('extra-css-loader')
                 .loader(require.resolve('style-loader'))
@@ -37,9 +36,22 @@ function createRules({
 
         rule.use('css-loader')
             .loader(require.resolve('css-loader'))
-        .options({
-            ...config.cssLoader
-        });
+            .options(
+                deepmerge(
+                    {
+                        importLoaders: 1,
+                        // https://webpack.js.org/loaders/css-loader/#onlylocals
+                        ...(isCSSModules
+                            ? {
+                                modules: {
+                                    localIdentName: '[local]___[hash:base64:5]'
+                                }
+                            }
+                            : {})
+                    },
+                    config.cssLoader || {}
+                )
+            );
 
         rule.use('postcss-loader')
             .loader(require.resolve('postcss-loader'))
@@ -62,6 +74,11 @@ function createRules({
         }
     }
 
+    const rule = webpackConfig.module.rule(lang).test(test);
+    applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
+    applyLoaders(rule.oneOf('css'), false);
+}
+
 export default function createCssWebpackConfig({
     isDev,
     config,

packages/fes-template/.fes.js

@@ -80,4 +80,7 @@ export default {
         strict: true,
     },
     dynamicImport: true,
+    extraBabelPlugins: [
+        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
+    ]
 };

packages/fes-template/src/pages/index.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="haizekuo">
+    <div :class="$style.red">
+        <a-input placeholder="请输入。。。" />
+        <a-button type="primary">Primary</a-button>
         <div>国际化 {{t("test")}}</div>
         fes & 拉夫德鲁 <br />
         <access :id="accessId"> accessOnepicess1 <input /> </access>
@@ -22,8 +24,16 @@ import { ref, onMounted } from 'vue';
 import {
     useAccess, useRouter, useI18n, locale, enums, request
 } from '@fesjs/fes';
+import { Button, Input } from 'ant-design-vue';
 
 export default {
+    components: {
+        [Button.name]: Button,
+        [Input.name]: Input,
+    },
+    mounted(){
+        console.log("$style:", this.$style)
+    },
     setup() {
         const fes = ref('fes upgrade to vue3');
         const accessOnepicess = useAccess('/onepiece1');
@@ -123,8 +133,11 @@ export default {
 };
 </script>
 
-<style scoped>
-.haizekuo {
-    /* background: url('../images/icon.png'); */
+<style module>
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
 }
 </style>