diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts index 49eeb358e..74f6991f3 100644 --- a/packages/vant-cli/src/common/constant.ts +++ b/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'); diff --git a/packages/vant-cli/src/common/css.ts b/packages/vant-cli/src/common/css.ts new file mode 100644 index 000000000..e6de1c8e7 --- /dev/null +++ b/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; +} diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index 8b80c2587..1f1b15ad6 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/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 }; diff --git a/packages/vant-cli/src/compiler/gen-component-style.ts b/packages/vant-cli/src/compiler/gen-component-style.ts index 432934e58..8d1372afd 100644 --- a/packages/vant-cli/src/compiler/gen-component-style.ts +++ b/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 + }); } }); } diff --git a/packages/vant-cli/src/compiler/gen-package-style.ts b/packages/vant-cli/src/compiler/gen-package-style.ts index 10a8ada36..b38b1c115 100644 --- a/packages/vant-cli/src/compiler/gen-package-style.ts +++ b/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');