Closed yaodong5063 closed 2 years ago
这是打印出来的值,js里面拿到是undefined,jsx就能拿到
在umi3里面是可以两个都拿到的,现在项目里面有几个库是js里面直接引入了less,现在拿不到值,很头疼,有没方式能解析掉的
复现库 https://github.com/yaodong5063/umi4_nodeModules.git 把node_modules/demoModule先拿出来,安装完在丢进去node_modules里面启动就能在控制台上看到, 希望能有个方法或者给个解决方案 @sorrycc
使用了cssLoaderModules兼容但是报错了
打包的时候我发现引入的好像被忽略了
@fz6m @sorrycc 有人帮看下嘛, cssLoaderModules:{ auto:true, },设置后的引入路径报错
配一下 extraBabelIncludes
吧,node_modules
的 js 资源不走 babel 的,无法完成 auto css module :
// .umirc.ts
export default {
extraBabelIncludes: ['your-pkg-name']
}
或者就直接发 jsx|tsx
的 npm 包。
配一下
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引入也是报错的
给最小复现,我这里没有问题。
给最小复现,我这里没有问题。
https://github.com/yaodong5063/umi4_nodeModules.git, 这个你看下,我更新了
在发布新版本前,你可以通过如下方式解决:
// .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
}
}
chainWebpack(memo) { memo.module.rule('extra-src').include.add( [ dirname(require.resolve('demoModule/package.json')) ] ); return memo }
感谢,刚试了下可以的
这个大概什么时候修复发布啊
每周四发布。
请问 extraBabelIncludes: ['your-pkg-name'],这个your-pkg-name要填什么才可以解决这个问题呢
// .umirc.ts
export default {
extraBabelIncludes: [
'你使用 css modules 的 npm 包的包名',
// ↓ 假如你有很多这种包,并且他们都是在内网 @scope 下发包的,使用正则指定前缀即可。
/@company\//
]
}
// .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) 你知道如何解决么。
给复现看看
给复现看看
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;
给复现看看
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
},
请问 node_modules 中 .js 文件里使用了 cssModules 写法无效这个点有解了吗?
默认情况应用不对 node_modules
里的 js 文件做处理,如果希望特别处理,可以配置 extraBabelIncludes