feat(cli): import base css

packages/vant-cli/src/common/constant.ts

@@ -10,6 +10,8 @@ export const CONFIG_FILE = join(CWD, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(CWD, 'package.json');
 export const WEBPACK_CONFIG_FILE = join(CWD, 'webpack.config.js');
 
+export const STYLE_DIR = join(SRC_DIR, 'style');
+
 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
 

packages/vant-cli/src/common/css.ts

@@ -0,0 +1,33 @@
+import { get } from 'lodash';
+import { join, isAbsolute } from 'path';
+import { CONFIG, STYLE_DIR, SRC_DIR } from './constant';
+import { existsSync } from 'fs';
+
+type CSS_LANG = 'css' | 'less' | 'scss';
+
+function getCssLang(): CSS_LANG {
+  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
+
+  if (preprocessor === 'sass') {
+    return 'scss';
+  }
+
+  return preprocessor;
+}
+
+export const CSS_LANG = getCssLang();
+
+export function getCssBaseFile() {
+  let path = join(STYLE_DIR, `base.${CSS_LANG}`);
+
+  const baseFile = get(CONFIG, 'build.css.base', '');
+  if (baseFile) {
+    path = isAbsolute(baseFile) ? baseFile : join(SRC_DIR, baseFile);
+  }
+
+  if (existsSync(path)) {
+    return path;
+  }
+
+  return null;
+}

packages/vant-cli/src/common/index.ts

@@ -1,7 +1,8 @@
 import decamelize from 'decamelize';
-import { readdirSync, existsSync, lstatSync, readFileSync } from 'fs-extra';
 import { join } from 'path';
-import { SRC_DIR, WEBPACK_CONFIG_FILE } from './constant';
+import { get } from 'lodash';
+import { readdirSync, existsSync, lstatSync, readFileSync } from 'fs-extra';
+import { CONFIG, SRC_DIR, WEBPACK_CONFIG_FILE } from './constant';
 
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@@ -103,4 +104,14 @@ export function isDev() {
   return process.env.NODE_ENV === 'development';
 }
 
+export function getCssLang(): string {
+  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
+
+  if (preprocessor === 'sass') {
+    return 'scss';
+  }
+
+  return preprocessor;
+}
+
 export { decamelize };

packages/vant-cli/src/compiler/gen-component-style.ts

@@ -4,9 +4,14 @@
 
 import { join, relative } from 'path';
 import { outputFileSync } from 'fs-extra';
-import { getComponents } from '../common';
-import { getStyleExt } from './gen-package-style';
-import { ES_DIR, LIB_DIR, STYPE_DEPS_JSON_FILE } from '../common/constant';
+import { getComponents, replaceExt } from '../common';
+import { CSS_LANG, getCssBaseFile } from '../common/css';
+import {
+  ES_DIR,
+  SRC_DIR,
+  LIB_DIR,
+  STYPE_DEPS_JSON_FILE
+} from '../common/constant';
 
 function getDeps(component: string): string[] {
   const styleDepsJson = require(STYPE_DEPS_JSON_FILE);
@@ -26,29 +31,64 @@ function getRelativePath(component: string, style: string, ext: string) {
   return relative(join(ES_DIR, `${component}/style`), getPath(style, ext));
 }
 
-function genEntry(component: string, filename: string, ext = '') {
+const OUTPUT_CONFIG = [
+  {
+    dir: ES_DIR,
+    template: (dep: string) => `import '${dep}';`
+  },
+  {
+    dir: LIB_DIR,
+    template: (dep: string) => `require('${dep}');`
+  }
+];
+
+function genEntry(params: {
+  ext: string;
+  filename: string;
+  component: string;
+  baseFile: string | null;
+}) {
+  const { ext, filename, component, baseFile } = params;
   const deps = getDeps(component);
   const depsPath = deps.map(dep => getRelativePath(component, dep, ext));
 
-  const esEntry = join(ES_DIR, component, `style/${filename}`);
-  const libEntry = join(LIB_DIR, component, `style/${filename}`);
+  OUTPUT_CONFIG.forEach(({ dir, template }) => {
+    const outputDir = join(dir, component, 'style');
+    const outputFile = join(outputDir, filename);
 
-  const esContent = depsPath.map(dep => `import '${dep}';`).join('\n');
-  const libContent = depsPath.map(dep => `require('${dep}');`).join('\n');
+    let content = '';
 
-  outputFileSync(esEntry, esContent);
-  outputFileSync(libEntry, libContent);
+    if (baseFile) {
+      const compiledBaseFile = replaceExt(baseFile.replace(SRC_DIR, dir), ext);
+      content += template(relative(outputDir, compiledBaseFile));
+      content += '\n';
+    }
+
+    content += depsPath.map(template).join('\n');
+
+    outputFileSync(outputFile, content);
+  });
 }
 
 export function genComponentStyle() {
-  const ext = getStyleExt();
   const components = getComponents();
+  const baseFile = getCssBaseFile();
 
   components.forEach(component => {
-    genEntry(component, 'index.js', '.css');
+    genEntry({
+      baseFile,
+      component,
+      filename: 'index.js',
+      ext: '.css'
+    });
 
-    if (ext !== 'css') {
-      genEntry(component, ext + '.js', '.' + ext);
+    if (CSS_LANG !== 'css') {
+      genEntry({
+        baseFile,
+        component,
+        filename: CSS_LANG + '.js',
+        ext: '.' + CSS_LANG
+      });
     }
   });
 }

packages/vant-cli/src/compiler/gen-package-style.ts

@@ -1,30 +1,25 @@
-import { get } from 'lodash';
 import { join } from 'path';
 import { writeFileSync } from 'fs-extra';
 import { replaceExt } from '../common';
+import { CSS_LANG, getCssBaseFile } from '../common/css';
 import {
-  CONFIG,
   SRC_DIR,
   PACKAGE_STYLE_FILE,
   STYPE_DEPS_JSON_FILE
 } from '../common/constant';
 
-export function getStyleExt(): string {
-  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
-
-  if (preprocessor === 'sass') {
-    return 'scss';
-  }
-
-  return preprocessor;
-}
-
 export function genPacakgeStyle() {
   const styleDepsJson = require(STYPE_DEPS_JSON_FILE);
+  const ext = '.' + CSS_LANG;
 
-  const ext = '.' + getStyleExt();
+  let content = '';
 
-  const content = styleDepsJson.sequence
+  const baseFile = getCssBaseFile();
+  if (baseFile) {
+    content += `@import "${baseFile}";\n`;
+  }
+
+  content += styleDepsJson.sequence
     .map((name: string) => `@import "${join(SRC_DIR, `${name}/index${ext}`)}";`)
     .join('\n');