Nx、Vite、React 库在构建中不应用 Scss 样式

Nx, Vite, React library does not apply Scss styles in the build

提问人:menaka 提问时间:11/16/2023 更新时间:11/16/2023 访问量:29

问:

我是 monorepo 的新手,我已经构建了几个常用的组件,用于一个名为 web 的库,样式由 .当我在 monorepo 中的应用程序中使用该库时,它可以完美运行。但是,当我创建包并在外部使用它时,不会将任何样式应用于库。 除了造型之外,其他东西似乎在包装中起作用。NxReactSCSSSCSS

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 文件,但即使手动添加到项目中,样式似乎也未正确应用。

构建目录

build dir

如果有一个插件可以将 SCSS 样式注入到输出 index.js 文件中,那将是一个理想的解决方案。或者,对此问题的任何其他可行解决方案将不胜感激。

css reactjs sass vite nx-monorepo

评论

0赞 menaka 11/16/2023
一个临时解决方案是获取一个有效的 css 文件并将其导入到项目中cssCodeSplit: truevite.config.ts

答: 暂无答案