feat: export createCSSRule in chainWebpack for implementing sass, sty…

…lus, ...
umijs · Mar 9, 2020 · b0b3694 · b0b3694
1 parent 68506de
commit b0b3694
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 8 deletions.
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -91,7 +91,7 @@ Umi 内置了以下别名：
 
 ```js
 export default {
-  chainWebpack(memo, { env, webpack }) {
+  chainWebpack(memo, { env, webpack, createCSSRule }) {
     // 设置 alias
     memo.resolve.alias.set('foo', '/tmp/a/b/foo');
 
@@ -108,6 +108,7 @@ export default {
 * memo，当前 webpack-chain对象
 * env，当前环境，`development`、`production` 或 `test` 等
 * webpack，webpack 实例，用于获取其内部插件
+* createCSSRule，用于扩展其他 CSS 实现，比如 sass, stylus
 
 ## chunks
 

diff --git a/docs/config/README.zh-CN.md b/docs/config/README.zh-CN.md
@@ -89,7 +89,7 @@ Umi 内置了以下别名：
 
 ```js
 export default {
-  chainWebpack(memo, { env, webpack }) {
+  chainWebpack(memo, { env, webpack, createCSSRule }) {
     // 设置 alias
     memo.resolve.alias.set('foo', '/tmp/a/b/foo');
 
@@ -106,6 +106,7 @@ export default {
 * memo，当前 webpack-chain对象
 * env，当前环境，`development`、`production` 或 `test` 等
 * webpack，webpack 实例，用于获取其内部插件
+* createCSSRule，用于扩展其他 CSS 实现，比如 sass, stylus
 
 ## chunks
 

diff --git a/docs/plugins/api.md b/docs/plugins/api.md
@@ -262,7 +262,7 @@ api.addHTMLScript(() => {
 比如：
 
 ```js
-api.chainWebpack((config, { webpack }) => {
+api.chainWebpack((config, { webpack, env, createCSSRule }) => {
   // Set alias
   config.resolve.alias.set('a', 'path/to/a');
 

diff --git a/docs/plugins/api.zh-CN.md b/docs/plugins/api.zh-CN.md
@@ -262,7 +262,7 @@ api.addHTMLScript(() => {
 比如：
 
 ```js
-api.chainWebpack((config, { webpack }) => {
+api.chainWebpack((config, { webpack, env, createCSSRule }) => {
   // Set alias
   config.resolve.alias.set('a', 'path/to/a');
 

diff --git a/packages/bundler-webpack/src/getConfig/css.ts b/packages/bundler-webpack/src/getConfig/css.ts
@@ -21,7 +21,7 @@ interface ICreateCSSRuleOpts extends IOpts {
   options?: object;
 }
 
-function createCSSRule({
+export function createCSSRule({
   webpackConfig,
   config,
   lang,

diff --git a/packages/bundler-webpack/src/getConfig/getConfig.ts b/packages/bundler-webpack/src/getConfig/getConfig.ts
@@ -11,7 +11,7 @@ import {
   getBabelPresetOpts,
   getTargetsAndBrowsersList,
 } from '@umijs/bundler-utils';
-import css from './css';
+import css, { createCSSRule } from './css';
 import terserOptions from './terserOptions';
 import { objToStringified } from './utils';
 
@@ -391,16 +391,29 @@ export default async function getConfig(
     },
   );
 
+  function createCSSRuleFn(opts: any) {
+    createCSSRule({
+      webpackConfig,
+      config,
+      isDev,
+      browserslist,
+      miniCSSExtractPluginLoaderPath,
+      ...opts,
+    });
+  }
+
   if (opts.chainWebpack) {
     webpackConfig = await opts.chainWebpack(webpackConfig, {
       webpack: bundleImplementor,
+      createCSSRule: createCSSRuleFn,
     });
   }
   // 用户配置的 chainWebpack 优先级最高
   if (config.chainWebpack) {
     config.chainWebpack(webpackConfig, {
       env,
       webpack: bundleImplementor,
+      createCSSRule: createCSSRuleFn,
     });
   }
   let ret = webpackConfig.toConfig() as defaultWebpack.Configuration;

diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -65,6 +65,15 @@ export interface ITargets {
   [key: string]: number | boolean;
 }
 
+interface ICreateCSSRule {
+  (opts: {
+    lang: string;
+    test: RegExp;
+    loader?: string;
+    options?: object;
+  }): void;
+}
+
 type IPresetOrPlugin = string | [string, any];
 type env = 'development' | 'production';
 
@@ -155,7 +164,10 @@ export interface IApi extends PluginAPI {
     (string | { name: string; headScript?: boolean })[],
     { route: IRoute }
   >;
-  chainWebpack: IModify<WebpackChain, { webpack: typeof webpack }>;
+  chainWebpack: IModify<
+    WebpackChain,
+    { webpack: typeof webpack; createCSSRule: ICreateCSSRule }
+  >;
 
   // ApplyPluginType.add
   addHTMLHeadScripts: IAdd<{ route?: IRoute }, IScriptConfig>;
@@ -206,7 +218,14 @@ export interface IConfig extends IConfigCore {
   autoprefixer?: object;
   base?: string;
   chainWebpack?: {
-    (memo: WebpackChain, args: { webpack: typeof webpack; env: env }): void;
+    (
+      memo: WebpackChain,
+      args: {
+        webpack: typeof webpack;
+        env: env;
+        createCSSRule: ICreateCSSRule;
+      },
+    ): void;
   };
   chunks?: string[];
   cssLoader?: object;