Ice devtools 皮肤配置能力 (#1234)

* feat: support skin config in block

* chore: 提示优化

* feat: 支持加载组件样式

* fix: 文档错误

* docs: 增加皮肤配置文档

* fix: 文档链接

* revert: 文档修改

* docs: add changelog

* chore: v2.0.2

docs/materials/add-block.md

@@ -204,3 +204,7 @@ $ npm run deploy
 ## 验证数据
 
 当物料源更新后，我们打开 Iceworks 进入到区块界面，点击刷新按钮，如果看到对应的区块截图已经更新，即可说明区块的相关信息也已经更新。此时，下载到项目的代码也即是最新的区块代码。
+
+## 皮肤配置
+
+如果希望在预览区块时，也带上皮肤配置，可以参考这份[文档](#/advanced/webpackrc#主题配置%20-%20themeConfig)进行配置。

tools/ice-devtools/CHANGELOG.md

@@ -0,0 +1,10 @@
+# ice-scripts Changelog
+
+## 2.0.2
+- [feat] block 预览支持皮肤配置
+
+## 2.0.1
+
+- [feat] 支持同步物料源数据到 fusion 和 unpkg
+- [feat] 支持自动截图能力
+- [feat] 支持 scope 选择

tools/ice-devtools/config/getBabelConfig.js

@@ -25,9 +25,9 @@ module.exports = function getBabelrc() {
       [
         'babel-plugin-import',
         [
-          { libraryName: '@icedesign/base', style: true },
-          { libraryName: '@alife/next', style: true },
-          { libraryName: '@alifd/next', style: true },
+          { libraryName: '@icedesign/base' },
+          { libraryName: '@alife/next' },
+          { libraryName: '@alifd/next' },
         ],
       ]
     ]),

tools/ice-devtools/config/webpack.base.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const WebpackConfig = require('webpack-chain');
 const path = require('path');
 const debug = require('debug')('ice:webpack:base');
+const chalk = require('chalk');
 
 const BABEL_LOADER = require.resolve('babel-loader');
 const STYLE_LOADER = require.resolve('style-loader');
@@ -19,6 +20,8 @@ const URL_LOADER = require.resolve('url-loader');
 const URL_LOADER_LIMIT = 8192;
 
 const getBabelConfig = require('./getBabelConfig');
+const ICE_SKIN_LOADER = require.resolve('ice-skin-loader');
+const { getPkgJSON } = require('../utils/pkg-json');
 
 module.exports = function getWebpackBaseConfig(cwd, entries = {}) {
   const config = new WebpackConfig();
@@ -49,6 +52,18 @@ module.exports = function getWebpackBaseConfig(cwd, entries = {}) {
     .loader(CSS_LOADER)
     .end();
 
+  const pkgJSON = getPkgJSON(cwd);
+  const { buildConfig = {}, themeConfig = {} } = pkgJSON;
+  const theme = buildConfig.theme || buildConfig.themePackage;
+
+  if (theme) {
+    console.log('');
+    console.log(chalk.green('使用主题包: '), theme);
+    console.log('');
+  }
+
+  const appNodeModules = path.resolve(cwd, 'node_modules');
+
   config.module
     .rule('scss')
     .test(/\.s[a|c]ss$/)
@@ -60,6 +75,13 @@ module.exports = function getWebpackBaseConfig(cwd, entries = {}) {
     .end()
     .use('scss-loader')
     .loader(SASS_LOADER)
+    .end()
+    .use('ice-skin-loader')
+    .loader(ICE_SKIN_LOADER)
+    .options({
+      themeFile: theme && path.join(appNodeModules, `${theme}/variables.scss`),
+      themeConfig,
+    })
     .end();
 
   config.module
@@ -144,10 +166,30 @@ module.exports = function getWebpackBaseConfig(cwd, entries = {}) {
 
   config.plugin('import').use(WebpackPluginImport, [
     [
+      {
+        libraryName: /^@icedesign\/base\/lib\/([^/]+)/,
+        stylePath: 'style.js',
+      },
+      {
+        libraryName: /@icedesign\/.*/,
+        stylePath: 'style.js',
+      },
+      {
+        libraryName: /@ali\/ice-.*/,
+        stylePath: 'style.js',
+      },
+      {
+        libraryName: /^@alife\/next\/lib\/([^/]+)/,
+        stylePath: 'style.js',
+      },
       {
         libraryName: /^@alifd\/next\/lib\/([^/]+)/,
         stylePath: 'style.js',
       },
+      {
+        libraryName: /@alifd\/.*/,
+        stylePath: 'style.js',
+      },
     ],
   ]);
 

tools/ice-devtools/config/webpack.block.js

@@ -11,7 +11,7 @@ console.log('process.platform:', process.platform);
 const hbsPath = path.join(__dirname, '../template/preview/block.html.hbs');
 
 module.exports = function getWebpacksConfig(cwd) {
-  const config = getWebpackBaseConfig();
+  const config = getWebpackBaseConfig(cwd);
 
   // 增加入口文件  index.js
   const entry = path.join(cwd, 'src/index.js');

tools/ice-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ice-devtools",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "ice 物料开发者工具",
   "main": "bin/ice-devtools.js",
   "bin": {
@@ -35,6 +35,7 @@
     "handlebars": "^4.0.12",
     "handlebars-loader": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
+    "ice-skin-loader": "^0.2.0",
     "imagemin": "^6.0.0",
     "imagemin-pngquant": "^6.0.0",
     "inquirer": "^6.2.0",