fix: 解决 windicss 在开发环境 css 加载顺序问题 (#95)

packages/fes-plugin-windicss/src/index.js

@@ -13,15 +13,31 @@ export default (api) => {
         }
     });
 
-    api.addEntryImportsAhead(() => [{ source: 'windi.css' }]);
+    api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
 
-    api.chainWebpack((memo) => {
+    api.chainWebpack((memo, { createCSSRule }) => {
         memo.plugin('windicss').use(WindiCSSWebpackPlugin, [
             {
                 config: resolve(__dirname, '../windi.config.js'),
                 ...api.config.windicss
             }
         ]);
+        if (api.env === 'development') {
+            memo.module.rule('css').test((path) => {
+                if (path.endsWith('windi-utilities.css')) {
+                    return false;
+                }
+                return /\.css$/.test(path);
+            });
+            createCSSRule({
+                lang: 'windicss',
+                test: /windi-utilities.css$/,
+                styleLoaderOption: {
+                    insert: 'body'
+                }
+            });
+        }
+
         return memo;
     });
 };

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

@@ -19,14 +19,14 @@ function createRules({
     test,
     loader,
     options,
-    browserslist
+    browserslist,
+    styleLoaderOption
 }) {
     function applyLoaders(rule, isCSSModules) {
         if (isDev) {
             rule.use('extra-css-loader')
                 .loader(require.resolve('style-loader'))
-                .options({
-                });
+                .options(Object.assign({}, styleLoaderOption));
         } else {
             rule.use('extra-css-loader')
                 .loader(require('mini-css-extract-plugin').loader)
@@ -110,13 +110,12 @@ export default function createCssWebpackConfig({
         browserslist
     });
 
+    if (!isDev) {
         webpackConfig.plugin('extra-css')
             .use(require.resolve('mini-css-extract-plugin'), [{
-            filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
-            chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css'
+                filename: '[name].[contenthash:8].css',
+                chunkFilename: '[id].[contenthash:8].css'
             }]);
-
-    if (!isDev) {
         webpackConfig.optimization
             .minimizer('css')
             .use(require.resolve('css-minimizer-webpack-plugin'), [{}]);

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

@@ -1,17 +1,16 @@
 <template>
     <div class="page">
         home
+        <FButton class="m-2">Button</FButton>
     </div>
 </template>
-<config>
-{
-    "name": "index",
-    "title": "$home"
-}
-</config>
+
 <script>
+import { FButton } from '@fesjs/fes-design';
+
 export default {
     components: {
+        FButton
     },
     setup() {
         return {
@@ -24,3 +23,10 @@ export default {
 .page {
 }
 </style>
+
+<config>
+{
+    "name": "index",
+    "title": "$home"
+}
+</config>