修改主题时，按第三种方法失败 about antd-init

[sorrycc]

用的 antd-init 的脚手架么? webpack.config.js 贴出来看下。

[liujhfly]

// Learn more on how to config.
// - https://github.com/ant-tool/atool-build#配置扩展

const webpack = require('atool-build/lib/webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');

module.exports = function (webpackConfig) {
  webpackConfig.babel.plugins.push('transform-runtime');
  webpackConfig.babel.plugins.push(['antd', {
    style: 'css',  // if true, use less
  }]);

  // Enable this if you have to support IE8.
  // webpackConfig.module.loaders.unshift({
  //   test: /\.jsx?$/,
  //   loader: 'es3ify-loader',
  // });

  // Parse all less files as css module.
  webpackConfig.module.loaders.forEach(function(loader, index) {
    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
      loader.test = /\.dont\.exist\.file/;
    }
    if (loader.test.toString() === '/\\.module\\.less$/') {
      loader.test = /\.less$/;
    }
  });

  // Load src/entries/*.js as entry automatically.
  const files = glob.sync('./src/entries/*.js');
  const newEntries = files.reduce(function(memo, file) {
    const name = path.basename(file, '.js');
    memo[name] = file;
    return memo;
  }, {});
  webpackConfig.entry = Object.assign({}, webpackConfig.entry, newEntries);

  return webpackConfig;
};

[liujhfly]

@sorrycc 可以具体说明下版本更新后，如何能改组件库里的less的变量值呢？

[afc163]

默认的脚手架是有效的，感觉是修改了配置和 这个变化 的冲突导致的。

[sorrycc]

  // Parse all less files as css module.
  webpackConfig.module.loaders.forEach(function(loader, index) {
    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
      loader.test = /\.dont\.exist\.file/;
    }
    if (loader.test.toString() === '/\\.module\\.less$/') {
      loader.test = /\.less$/;
    }
  });

这段删掉试试。

[afc163]

@sorrycc 那段删掉就好了。

[maoyongming]

去掉webpackConfig那段代码，打包不报错了，但是修改的theme样式不生效，1.1.0版本可以；1.1.1和1.1.2都不行；引用第3种办法
@import "~antd/lib/style/themes/default.less";
@import "your-theme-file"; // 变量文件
@import "~antd/lib/style/core/index.less";
@import "~antd/lib/style/components.less";

[liujhfly]

@sorrycc @afc163 配置文件中的删掉那部分后，部分less变量可以改值，比如字体大小，行高等，有些不可以，比如主题颜色好像就改不了，请教如何解决

[afc163]

这里例子是可以修改主色的，我测试过最新的配置，你参照一下吧。https://github.com/ant-design/antd-init/tree/c0bde69268b528de4bf137e918dc7df9f339101d/examples/customize-antd-theme#less

[afc163]

npm@2 下会报类似楼主的错误。

[afc163]

ERROR in ./index.less
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module 'normalize.css/normalize.css' in /Users/afc163/Projects/antd-init/examples/customize-antd-theme
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/lib/Compilation.js:229:38
    at onDoneResolving (/Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/lib/NormalModuleFactory.js:85:20
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:241:17)
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/afc163/Projects/antd-init/examples/customize-antd-theme/node_modules/atool-build/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
 @ ./index.jsx 23:0-23

[liujhfly]

感谢各位的帮忙！！！

[sorrycc]

解决

个人推荐方法二。

方法一：

在 webpack.config.js 里加入 fallback 的配置。

const fallback = webpackConfig.resolve.fallback || [];
webpackConfig.resolve.fallback = fallback.concat(path.join(__dirname, 'node_modules/antd/node_modules'));

方法二：

项目安装 normalize.css 依赖，npm i normalize.css --save 。

原因

antd 的 less 文件走了 less-loader 之后，会被合并到项目的 less 编译结果里，这之后就不会再基于 node_modules/antd 的目录做模块解析了。

[afc163]

赞~

我上面加 inline 之后就好了，原来不走 less 解析能解决路径问题。

方法三

等下个版本。

[liujhfly]

@sorrycc @afc163 更新代码后，还是存在部分less变量可以改值，比如@font-size-base，@link-color等，有些不可以，比如@primary-color，@border-radius-base，@border-radius-sm好像就改不了，请教如何解决，能说明的具体点么？