feat(cli-plugin-service): enable modify css loaders options in luban.…

…config.ts
LeapFE · May 31, 2021 · d8a9228 · d8a9228
1 parent 9351f6e
commit d8a9228
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/packages/@luban/cli-plugin-service/src/config/module.ts b/packages/@luban/cli-plugin-service/src/config/module.ts
@@ -7,15 +7,27 @@ import {
   WebpackConfigName,
 } from "../definitions";
 import { cleanAssetPath } from "../utils/cleanAssetPath";
+import { CssLoaderOptions, LessLoaderOptions } from "../main";
 
 class Module implements ConfigPluginInstance {
   apply(args: ConfigPluginApplyCallbackArgs) {
     const isDevelopment = process.env.NODE_ENV !== "production";
     const { api, projectConfig } = args;
     const {
-      css: { sourceMap },
+      css: { sourceMap, loaderOptions },
     } = projectConfig;
 
+    const cssLoaderOptions: CssLoaderOptions = {
+      importLoaders: 1,
+      sourceMap,
+      ...(loaderOptions?.css || {}),
+    };
+    const lessLoaderOptions: LessLoaderOptions = {
+      sourceMap,
+      javascriptEnabled: true,
+      ...(loaderOptions?.less || {}),
+    };
+
     const genUrlLoaderOptions: (dir?: string) => UrlLoaderOptions = function(dir) {
       return {
         limit: projectConfig.assetsLimit,
@@ -32,6 +44,7 @@ class Module implements ConfigPluginInstance {
 
     const getMiniCssOptions = (configId: WebpackConfigName) => {
       return {
+        ...(loaderOptions?.miniCss || {}),
         emit: configId === "client",
       };
     };
@@ -108,11 +121,11 @@ class Module implements ConfigPluginInstance {
         .end()
         .use("css-loader")
         .loader("css-loader")
-        .options({ importLoaders: 1, sourceMap })
+        .options(cssLoaderOptions)
         .end()
         .use("postcss")
         .loader("postcss-loader")
-        .options({ sourceMap, ident: "postcss" })
+        .options({ sourceMap })
         .end();
 
       webpackConfig.module
@@ -125,23 +138,22 @@ class Module implements ConfigPluginInstance {
         .use("css-loader")
         .loader("css-loader")
         .options({
-          importLoaders: 1,
           modules: {
             mode: "global",
             exportGlobals: true,
-            localIdentName: "[name]__[local]__[hash:base64:5]",
+            localIdentName: "[name]_[local]_[hash:base64:5]",
             context: api.getContext(),
           },
-          sourceMap,
+          ...cssLoaderOptions,
         })
         .end()
         .use("postcss-loader")
         .loader("postcss-loader")
-        .options({ sourceMap, ident: "postcss" })
+        .options({ sourceMap })
         .end()
         .use("less-loader")
         .loader("less-loader")
-        .options({ sourceMap, noIeCompat: true, javascriptEnabled: true })
+        .options(lessLoaderOptions)
         .end();
     });
   }

diff --git a/packages/@luban/cli-plugin-service/src/lib/options.ts b/packages/@luban/cli-plugin-service/src/lib/options.ts
@@ -19,6 +19,11 @@ const schema = createSchema((joi) =>
     productionSourceMap: joi.boolean(),
     css: joi.object({
       sourceMap: joi.boolean(),
+      loaderOptions: joi.object({
+        less: joi.object(),
+        css: joi.object(),
+        miniCss: joi.object(),
+      }),
     }),
     alias: joi.object(),
     assetsLimit: joi.number(),
@@ -59,6 +64,11 @@ export function mergeProjectOptions(
     ...defaultsProjectConfig,
     css: {
       sourceMap: !isProduction,
+      loaderOptions: {
+        css: {},
+        less: {},
+        miniCss: {},
+      },
     },
     mock: rootOptions.fetch || false,
     configureWebpack: () => undefined,

diff --git a/packages/@luban/cli-plugin-service/src/main.ts b/packages/@luban/cli-plugin-service/src/main.ts
@@ -9,7 +9,7 @@ import {
   UserConfig,
 } from "./definitions";
 
-type CssLoaderOptions = {
+export type CssLoaderOptions = Partial<{
   url: boolean | ((url: string, path: string) => boolean);
   import: boolean | ((url: string, media: string, path: string) => boolean);
   modules:
@@ -27,9 +27,9 @@ type CssLoaderOptions = {
   localsConvention: string;
   onlyLocals: boolean;
   esModule: boolean;
-};
+}>;
 
-type PostcssLoaderOptions = {
+export type PostcssLoaderOptions = Partial<{
   exec: boolean;
   parser: boolean | Parser;
   syntax: boolean | Syntax;
@@ -42,18 +42,19 @@ type PostcssLoaderOptions = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   plugins: Plugin<any>[] | ((loader: webpack.loader.LoaderContext) => Plugin<any>[]);
   sourceMap: boolean | string;
-};
+}>;
 
-type MiniCSSLoaderOptions = {
+export type MiniCSSLoaderOptions = Partial<{
   publicPath: string | ((url: string, path: string) => string);
-  hmr: boolean;
-  reloadAll: boolean;
-};
+  emit: boolean;
+  esModule: boolean;
+}>;
+
+export type LessLoaderOptions = Partial<Less.Options & { sourceMap?: boolean }>;
 
 type OptionsOfCssLoader = {
   css: Partial<CssLoaderOptions>;
-  less: Partial<Less.Options>;
-  postcss: Partial<PostcssLoaderOptions>;
+  less: LessLoaderOptions;
   miniCss: Partial<MiniCSSLoaderOptions>;
 };
 
@@ -75,7 +76,12 @@ type CssConfig = {
 
   /**
    * @description 一些处理 css 的 loader 的配置项
-   * @deprecated since 2.0
+   * 支持的 loader 有:
+   * [css-loader](https://www.npmjs.com/package/css-loader/v/3.4.0)
+   * [less-loader](https://www.npmjs.com/package/less-loader/v/5.0.0)
+   * [mini-css-extract-plugin](https://www.npmjs.com/package/mini-css-extract-plugin/v/1.4.1#publicPath)
+   *
+   * postcss-loader 可以配置 postcss.config.js
    */
   loaderOptions: Partial<OptionsOfCssLoader>;
 };