修改主题时，按第三种方法失败 #52

liujhfly · 2016-05-23T08:25:35Z

@sorrycc
修改主题，按第三种方法，

index.less:
@import "~antd/lib/style/themes/default.less";
@import "your-theme-file"; // 变量文件
@import "~antd/lib/style/core/index.less";
@import "~antd/lib/style/components.less";

失败，总是报错，错误如下：
ERROR in ./src/entries/index.less
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../../node_modules/antd/lib/style/core/~normalize.css/normalize.css in /Users/liujihong/Documents/ant-simple/src/entries
at /Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/Compilation.js:229:38
at onDoneResolving (/Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
at /Users/liujihong/Documents/ant-simple/node_modules/webpack/lib/NormalModuleFactory.js:85:20
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:726:13
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:52:16
at done (/Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:241:17)
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:44:16
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:723:17
at /Users/liujihong/Documents/ant-simple/node_modules/async/lib/async.js:167:37
at /Users/liujihong/Documents/ant-simple/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
@ ./src/entries/index.js 5:0-23

Child extract-text-webpack-plugin:
chunk {0} extract-text-webpack-plugin-output-filename 1.16 MB [rendered]
[0] ./~~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~~/postcss-loader!.//less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less 1.16 MB {0} [built] [1 error]
[6] .//css-loader/lib/css-base.js 1.51 kB {0}

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../../node_modules/antd/lib/style/core/~normalize.css/normalize.css in /Users/liujihong/Documents/ant-simple/src/entries
 @ ./~/css-loader?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./~/less-loader?{"sourceMap":true,"modifyVars":{}}!./src/entries/index.less 3:10-190

没有更新版本的时候，这个方法是可行的。更新到1.1版本后，文档没有更新，按这种方法就失败了，请指点

The text was updated successfully, but these errors were encountered:

sorrycc · 2016-05-23T08:52:58Z

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

liujhfly · 2016-05-23T09:05:04Z

// 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 · 2016-05-23T09:08:40Z

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

afc163 · 2016-05-23T09:11:51Z

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

sorrycc · 2016-05-23T09:35:31Z

  // 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 · 2016-05-23T11:11:38Z

@sorrycc 那段删掉就好了。

maoyongming · 2016-05-24T05:54:58Z

去掉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 · 2016-05-24T09:25:02Z

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

afc163 · 2016-05-25T03:53:01Z

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

afc163 · 2016-05-25T06:55:13Z

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

afc163 · 2016-05-25T06:56:16Z

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 · 2016-05-25T13:36:01Z

感谢各位的帮忙！！！

sorrycc · 2016-05-26T03:27:30Z

解决

个人推荐方法二。

方法一：

在 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 · 2016-05-26T04:02:24Z

赞~

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

方法三

等下个版本。

liujhfly · 2016-05-28T14:00:35Z

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

afc163 assigned sorrycc May 23, 2016

afc163 added a commit that referenced this issue May 25, 2016

update example config for #52

0204523

afc163 closed this as completed May 25, 2016

afc163 reopened this May 25, 2016

afc163 added a commit to ant-design/ant-design that referenced this issue May 25, 2016

use inline import (ant-design/antd-init#52)

ee1ed40

afc163 closed this as completed May 26, 2016

afc163 mentioned this issue Feb 22, 2017

normalize.css should be updated ant-design/ant-design#1581

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

修改主题时，按第三种方法失败 #52

修改主题时，按第三种方法失败 #52

liujhfly commented May 23, 2016

sorrycc commented May 23, 2016

liujhfly commented May 23, 2016 •

edited by afc163

liujhfly commented May 23, 2016

afc163 commented May 23, 2016 •

edited

sorrycc commented May 23, 2016

afc163 commented May 23, 2016

maoyongming commented May 24, 2016

liujhfly commented May 24, 2016

afc163 commented May 25, 2016

afc163 commented May 25, 2016 •

edited

afc163 commented May 25, 2016

liujhfly commented May 25, 2016

sorrycc commented May 26, 2016

afc163 commented May 26, 2016 •

edited

liujhfly commented May 28, 2016

修改主题时，按第三种方法失败 #52

修改主题时，按第三种方法失败 #52

Comments

liujhfly commented May 23, 2016

sorrycc commented May 23, 2016

liujhfly commented May 23, 2016 • edited by afc163

liujhfly commented May 23, 2016

afc163 commented May 23, 2016 • edited

sorrycc commented May 23, 2016

afc163 commented May 23, 2016

maoyongming commented May 24, 2016

liujhfly commented May 24, 2016

afc163 commented May 25, 2016

afc163 commented May 25, 2016 • edited

afc163 commented May 25, 2016

liujhfly commented May 25, 2016

sorrycc commented May 26, 2016

解决

方法一：

方法二：

原因

afc163 commented May 26, 2016 • edited

方法三

liujhfly commented May 28, 2016

liujhfly commented May 23, 2016 •

edited by afc163

afc163 commented May 23, 2016 •

edited

afc163 commented May 25, 2016 •

edited

afc163 commented May 26, 2016 •

edited