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,45 +21,62 @@ function createRules({
     options,
     browserslist
 }) {
+    function applyLoaders(rule, isCSSModules) {
+        if (isDev) {
+            rule.use('extra-css-loader')
+                .loader(require.resolve('style-loader'))
+                .options({
+                });
+        } else {
+            rule.use('extra-css-loader')
+                .loader(require('mini-css-extract-plugin').loader)
+                .options({
+                });
+        }
+
+        rule.use('css-loader')
+            .loader(require.resolve('css-loader'))
+            .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'))
+            .options(deepmerge({
+                postcssOptions: () => ({
+                    plugins: [
+                        // https://github.com/luisrudge/postcss-flexbugs-fixes
+                        require('postcss-flexbugs-fixes'),
+                        require('postcss-safe-parser'),
+                        [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
+                        ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
+                    ]
+                })
+            }, config.postcssLoader || {}));
+
+        if (loader) {
+            rule.use(loader)
+                .loader(require.resolve(loader))
+                .options(options);
+        }
+    }
+
     const rule = webpackConfig.module.rule(lang).test(test);
-
+    applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
-    if (isDev) {
+    applyLoaders(rule.oneOf('css'), false);
-        rule.use('extra-css-loader')
-            .loader(require.resolve('style-loader'))
-            .options({
-            });
-    } else {
-        rule.use('extra-css-loader')
-            .loader(require('mini-css-extract-plugin').loader)
-            .options({
-            });
-    }
-
-    rule.use('css-loader')
-        .loader(require.resolve('css-loader'))
-        .options({
-            ...config.cssLoader
-        });
-
-    rule.use('postcss-loader')
-        .loader(require.resolve('postcss-loader'))
-        .options(deepmerge({
-            postcssOptions: () => ({
-                plugins: [
-                    // https://github.com/luisrudge/postcss-flexbugs-fixes
-                    require('postcss-flexbugs-fixes'),
-                    require('postcss-safe-parser'),
-                    [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
-                    ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
-                ]
-            })
-        }, config.postcssLoader || {}));
-
-    if (loader) {
-        rule.use(loader)
-            .loader(require.resolve(loader))
-            .options(options);
-    }
 }
 
 export default function createCssWebpackConfig({

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>
+<style module>
-.haizekuo {
+.red {
-    /* background: url('../images/icon.png'); */
+  color: red;
+}
+.bold {
+  font-weight: bold;
 }
 </style>