提问人:menaka 提问时间:11/16/2023 更新时间:11/16/2023 访问量:29
Nx、Vite、React 库在构建中不应用 Scss 样式
Nx, Vite, React library does not apply Scss styles in the build
问:
我是 monorepo 的新手,我已经构建了几个常用的组件,用于一个名为 web 的库,样式由 .当我在 monorepo 中的应用程序中使用该库时,它可以完美运行。但是,当我创建包并在外部使用它时,不会将任何样式应用于库。
除了造型之外,其他东西似乎在包装中起作用。Nx
React
SCSS
SCSS
package.json
{
"name": "@example/web",
"version": "1.1.3",
"license": "UNLICENSED",
"main": "./index.js",
"types": "./index.d.ts",
"exports": {
".": {
"import": "./index.mjs",
"require": "./index.js"
}
},
"repository": {
"directory": "libs/web",
"type": "git",
"url": "...."
},
"publishConfig": {
"registry": "https://npm.pkg.github.com"
}
}
project.json
{
"name": "web",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/web/src",
"projectType": "library",
"tags": [],
"targets": {
"lint": {
/////////
},
"build": {
"executor": "@nx/vite:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/libs/web"
},
"configurations": {
"development": {
"mode": "development"
},
"production": {
"mode": "production"
}
}
},
"test": {
////////////
}
}
}
vite.config.ts
export default defineConfig({
cacheDir: '../../node_modules/.vite/web',
plugins: [
dts({
entryRoot: 'src',
tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'),
skipDiagnostics: true,
}),
react(),
viteTsConfigPaths({
root: '../../',
}),
],
build: {
lib: {
entry: 'src/index.ts',
name: 'web',
fileName: 'index',
formats: ['es', 'cjs'],
},
rollupOptions: {
external: ['react', 'react-dom', 'react/jsx-runtime']
},
},
});
似乎样式与基于文档的输出文件 index.js 捆绑在一起。但是,尽管观察到正在生成包含所有样式的样式.css 文件,但即使手动添加到项目中,样式似乎也未正确应用。
构建目录
如果有一个插件可以将 SCSS 样式注入到输出 index.js 文件中,那将是一个理想的解决方案。或者,对此问题的任何其他可行解决方案将不胜感激。
答: 暂无答案
评论
cssCodeSplit: true
vite.config.ts