umi对node_modules里面的less不支持吗

[yaodong5063]

实际项目是支持less的，但是打包后下载到node_modules里的包所谓的less并不被支持
https://github.com/yaodong5063/umi4_error.git
这个是我做的例子，
安装好后把DemoModules这个包放到node_modules这个文件夹里，但是import进来的less无效

[fz6m]

1. 给的 demo 资源不全，加载不了 import dateSection from "../../assets/icon/dateSection.svg"; ( file: DemoModules/es/components/TimeSelect/Select.js )

2. 在 DemoModules/es/components/TimeSelect/Select.js 导入了：

     import styles from "./index.less";
   
     // ...
   
     const cx = {
       main: {
         layout: classname(styles.system),
         fixed: classname(styles.fixed),
         item: classname(styles.item),
         focus: classname(styles.focus)
       },
       custom: {
         layout: classname(styles.custom),
         text: classname(styles.text),
         hide: classname(styles.hide)
       },
       className: classname(styles["select-layout"])
     };

   但是在 DemoModules/es/components/TimeSelect/index.less 中没有 styles.system 对应的 system 等类。

请提供一个 完整资源 的、没有语法错误 的复现后再帮看。

[yaodong5063]

1. 给的 demo 资源不全，加载不了 import dateSection from "../../assets/icon/dateSection.svg"; ( file: DemoModules/es/components/TimeSelect/Select.js )

2. 在 DemoModules/es/components/TimeSelect/Select.js 导入了：

     import styles from "./index.less";
   
     // ...
   
     const cx = {
       main: {
         layout: classname(styles.system),
         fixed: classname(styles.fixed),
         item: classname(styles.item),
         focus: classname(styles.focus)
       },
       custom: {
         layout: classname(styles.custom),
         text: classname(styles.text),
         hide: classname(styles.hide)
       },
       className: classname(styles["select-layout"])
     };

   但是在 DemoModules/es/components/TimeSelect/index.less 中没有 styles.system 对应的 system 等类。

请提供一个 完整资源 的、没有语法错误 的复现后再帮看。

DemoModules/es/components/TimeSelect/index.less 实际上这个里面有这个system类的，但是获取不到。
感觉好奇怪，同样的模块，丢到umi3里面是可以的
这是下面less的内容
.select-layout {
.system {
padding: 16px 12px 4px 12px;

& > div {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0px 6px;
  height: 24px;
  width: 33.33%;
  text-align: center;

  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 16px;

  .lock-item();
}

[yaodong5063]

1. 给的 demo 资源不全，加载不了 import dateSection from "../../assets/icon/dateSection.svg"; ( file: DemoModules/es/components/TimeSelect/Select.js )

2. 在 DemoModules/es/components/TimeSelect/Select.js 导入了：

     import styles from "./index.less";
   
     // ...
   
     const cx = {
       main: {
         layout: classname(styles.system),
         fixed: classname(styles.fixed),
         item: classname(styles.item),
         focus: classname(styles.focus)
       },
       custom: {
         layout: classname(styles.custom),
         text: classname(styles.text),
         hide: classname(styles.hide)
       },
       className: classname(styles["select-layout"])
     };

   但是在 DemoModules/es/components/TimeSelect/index.less 中没有 styles.system 对应的 system 等类。

请提供一个 完整资源 的、没有语法错误 的复现后再帮看。

DemoModules/es/components/TimeSelect/index.less 实际上这个里面有这个system类的，但是获取不到。
感觉好奇怪，同样的模块，丢到umi3里面是可以的
这是下面less的内容
.select-layout {
.system {
padding: 16px 12px 4px 12px;

& > div {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0px 6px;
  height: 24px;
  width: 33.33%;
  text-align: center;

  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 16px;

  .lock-item();
}

[wangxingkang]

封装的包里面不建议使用 css modules， 要不然就需要配置 extraBabelIncludes

[yaodong5063]

封装的包里面不建议使用 css modules， 要不然就需要配置 extraBabelIncludes

extraBabelIncludes配了没生效，是不是还要extraBabelPlugins，或者extraPostCSSPlugins

[wangxingkang]

你最好把样式换下吧

[wangxingkang]

我等会试一下

[fz6m]

umi4 会对所有 .jsx / .tsx 做转译，而不关心他是否在 node_modules ，如果你有 css modules 诉求可以把 .tsx 的组件库源码发包带出来，无需 father / tsc 进行编译。

一个例子：https://github.com/MoeYc/umi4-components-lib-example

[yaodong5063]

umi4 会对所有 .jsx / .tsx 做转译，而不关心他是否在 node_modules ，如果你有 css modules 诉求可以把 .tsx 的组件库源码发包带出来，无需 father / tsc 进行编译。

一个例子：https://github.com/MoeYc/umi4-components-lib-example

的确直接丢进去可以用的，但是不一定都是umi的项目，还是要打下包

[yaodong5063]

我等会试一下

这个源码直接丢进去是可以用的，但是用你们rc版本的father打包后就不行了，你们是不是可以加个less文件解析或者支持下chainwebpack，🤩

[wangxingkang]

只有 umd 的内核 是webpack ，无法支持这个的

[yaodong5063]

只有 umd 的内核 是webpack ，无法支持这个的

那是否可以设置个开关设置下把less进行个转换

[sorrycc]

不能复现，node_modules 下的 less 是会编译的。

由于缺乏足够的信息，我们暂时关闭了该 Issue。请提供 最小重现 以重新开启 Issue。谢谢。

[sorrycc]

sorrycc-cqhd0c.zip
以上是我的复现项目。