umi4移除了对.js后缀里面less引入的解析吗

[yaodong5063]

这是打印出来的值，js里面拿到是undefined,jsx就能拿到 在umi3里面是可以两个都拿到的，现在项目里面有几个库是js里面直接引入了less，现在拿不到值，很头疼，有没方式能解析掉的

[yaodong5063]

复现库 https://github.com/yaodong5063/umi4_nodeModules.git 把node_modules/demoModule先拿出来，安装完在丢进去node_modules里面启动就能在控制台上看到， 希望能有个方法或者给个解决方案 @sorrycc

[fz6m]

https://github.com/umijs/umi/issues/8642

[yaodong5063]

使用了cssLoaderModules兼容但是报错了

[yaodong5063]

打包的时候我发现引入的好像被忽略了

[yaodong5063]

@fz6m @sorrycc 有人帮看下嘛， cssLoaderModules:{ auto:true, },设置后的引入路径报错

[fz6m]

配一下 extraBabelIncludes 吧，node_modules 的 js 资源不走 babel 的，无法完成 auto css module ：

// .umirc.ts

export default {
  extraBabelIncludes: ['your-pkg-name']
}

或者就直接发 jsx|tsx 的 npm 包。

[yaodong5063]

配一下 extraBabelIncludes 吧，node_modules 的 js 资源不走 babel 的，无法完成 auto css module ：

// .umirc.ts

export default {
  extraBabelIncludes: ['your-pkg-name']
}

或者就直接发 jsx|tsx 的 npm 包。

实际上配了extraBabelIncludes 不生效的 我配了auto css module，src里面的less引入也是报错的

[fz6m]

给最小复现，我这里没有问题。

[yaodong5063]

给最小复现，我这里没有问题。

https://github.com/yaodong5063/umi4_nodeModules.git, 这个你看下，我更新了

[fz6m]

在发布新版本前，你可以通过如下方式解决：

// .umirc.ts
import { dirname } from 'path'

export default {
  // not need extraBabelIncludes
  chainWebpack(memo) {
    memo.module.rule('extra-src').include.add(
      [
        dirname(require.resolve('demoModule/package.json'))
      ]
    );
    return memo
  }
}

[yaodong5063]

chainWebpack(memo) {
    memo.module.rule('extra-src').include.add(
      [
        dirname(require.resolve('demoModule/package.json'))
      ]
    );
    return memo
  }

感谢，刚试了下可以的

[yaodong5063]

这个大概什么时候修复发布啊

[fz6m]

每周四发布。

[lbyupup]

请问 extraBabelIncludes: ['your-pkg-name']，这个your-pkg-name要填什么才可以解决这个问题呢

[fz6m]

// .umirc.ts

export default {
  extraBabelIncludes: [
    '你使用 css modules 的 npm 包的包名',

    // ↓ 假如你有很多这种包，并且他们都是在内网 @scope 下发包的，使用正则指定前缀即可。
    /@company\//
  ]
}

[lbyupup]

// .umirc.ts

export default {
  extraBabelIncludes: [
    '你使用 css modules 的 npm 包的包名',

    // ↓ 假如你有很多这种包，并且他们都是在内网 @scope 下发包的，使用正则指定前缀即可。
    /@company\//
  ]
}

好的谢谢。不过我发现我是项目内的less文件引入报错，提示 export 'default' (imported as 'styles') was not found in './index.less?modules' (module has no exports) 你知道如何解决么。

[fz6m]

给复现看看

[lbyupup]

给复现看看

umi@4.0.15 config 配置

  hash: true,
  qiankun: {
    slave: {}
  },
  locale: {
    antd: true,
    baseNavigator: true
  },
  cssLoaderModules: {
    auto: true
  },
chainWebpack(config: any) {
    // 修改fonts输出目录
    config.module
      .rule('otf')
      .test(/\.otf/)
      .use('babel')
      .loader('file-loader')
      .options({
        presets: [['@babel/preset-env', { modules: false }]],
        publicPath: '/xxx-web/'
      });
    // config.module
    //   .rule('less')
    //   .oneOf('css-modules')
    //   .use('extract-css-loader')
    //   .tap(() => ({
    //     publicPath: '../',
    //     hmr: false
    //   }));
    return config;
  }

页面引入less

import React from 'react';
import styles from './index.less';
const Demo = () => {
  return <div className={styles.demo} />;
};

export default Demo;

[lbyupup]

给复现看看

umi@4.0.15 config 配置

  hash: true,
  qiankun: {
    slave: {}
  },
  locale: {
    antd: true,
    baseNavigator: true
  },
  cssLoaderModules: {
    auto: true
  },
chainWebpack(config: any) {
    // 修改fonts输出目录
    config.module
      .rule('otf')
      .test(/\.otf/)
      .use('babel')
      .loader('file-loader')
      .options({
        presets: [['@babel/preset-env', { modules: false }]],
        publicPath: '/xxx-web/'
      });
    // config.module
    //   .rule('less')
    //   .oneOf('css-modules')
    //   .use('extract-css-loader')
    //   .tap(() => ({
    //     publicPath: '../',
    //     hmr: false
    //   }));
    return config;
  }

页面引入less

import React from 'react';
import styles from './index.less';
const Demo = () => {
  return <div className={styles.demo} />;
};

export default Demo;

把这个配置去掉之后就可以了

cssLoaderModules: {
    auto: true
  },

[lpgray]

请问 node_modules 中 .js 文件里使用了 cssModules 写法无效这个点有解了吗？

[fz6m]

默认情况应用不对 node_modules 里的 js 文件做处理，如果希望特别处理，可以配置 extraBabelIncludes