Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite 库模式下 生产环境后,.module.less文件编译后异常无法使用样式 #17890

Closed
7 tasks done
tzbcf opened this issue Aug 16, 2024 · 1 comment
Closed
7 tasks done
Labels
duplicate This issue or pull request already exists

Comments

@tzbcf
Copy link

tzbcf commented Aug 16, 2024

Describe the bug

在dev环境下:import style from './index.module.less' ;

{ text }

,使用正常;
在build后,index.module.less文件编译成index.module.less.js + index.module.css;
编译的js中:import r from "./index.module.less.js"; React.createElement("p", { className: r.text }, t));
样式使用异常。并被引入时,导致界面报错。
下面是我的vite.config.ts配置,希望有人能帮助我。谢谢!
export default defineConfig({
build: {
target: 'modules',
outDir: "dist",
minify: true,
cssTarget: 'chrome61',
cssCodeSplit: true,
lib: {
// 组件库源码的入口文件
entry: path.resolve(__dirname, './package/index.ts'),
formats:['es']
},
rollupOptions: {
external: ['react', 'react-dom'],
input: './package/index.ts',
output: {
format: "cjs",
entryFileNames: '[name].js',
chunkFileNames: '[name].js',
assetFileNames: '[name].[ext]',
//让打包目录和我们目录对应
preserveModules: true,
exports: "named",
dir: path.resolve(__dirname, "./dist"),
//配置打包根目录
globals: {
react: 'react',
'react-dom': 'react-dom',
},
},
},
},
css: {
transformer: 'postcss',
modules: {
scopeBehaviour: 'local'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
}
},
},
plugins: [
react({
jsxRuntime: 'classic'
}),
dts({
entryRoot: "package",
outDir: path.resolve(__dirname, "./dist"),
exclude: ['./node_modules'],
tsconfigPath: "./tsconfig.app.json",
}),
],
})

Reproduction

http://localhost:5173/

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 6.73 GB / 15.90 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Logs

image
image
image

Validations

@sapphi-red
Copy link
Member

The output is expected. The library user needs to load the built CSS file.
See #1579.

@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Aug 16, 2024
@sapphi-red sapphi-red added duplicate This issue or pull request already exists and removed pending triage labels Aug 16, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Aug 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants