如何使用 Angular 自定义 Web 组件设置顺风

Question

我的目标是使用 Angular 自定义 Web 组件项目设置 Tailwind CSS。由于自定义 Web 组件，我使用ngx-build-plus:browser来提供和构建（因为这可以帮助将所有内容捆绑到一个捆绑包中）。

然后我按照本指南来实施 Tailwind，但是当我尝试为应用程序提供服务时，我收到以下错误：

ERROR in Module build failed (from <path-to-project>/node_modules/postcss-loader/src/index.js):
Error: Failed to find '~projects/<web-component-project>/src/styles.scss'
  in [
    <path-to-project>/projects/<web-component-project>/src/app
  ]
    at <path-to-project>/node_modules/postcss-import/lib/resolve-id.js:35:13

tailwind.config.js

ERROR in Module build failed (from <path-to-project>/node_modules/postcss-loader/src/index.js):
Error: Failed to find '~projects/<web-component-project>/src/styles.scss'
  in [
    <path-to-project>/projects/<web-component-project>/src/app
  ]
    at <path-to-project>/node_modules/postcss-import/lib/resolve-id.js:35:13

webpack.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

服务命令

ng s --project <project-name> --single-bundle --extra-webpack-config webpack.config.js

tsconfig.base.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "importHelpers": true,
        "module": "esnext",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "downlevelIteration": true,
        "baseUrl": "./",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2019", "dom", "esnext.asynciterable"],
        "types": ["node", "jest"]
    },
    "exclude": ["cypress", "aveiro-server", "eddyhelp"]
}

项目//tsconfig.app.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "../../out-tsc/app",
        "module": "es2015",
        "target": "es2015",
        "types": []
    },
    "files": ["src/main.ts", "src/polyfills.ts"],
    "include": ["src/**/*.d.ts"]
}

发生了什么 - 为什么要postcss-loader尝试查看app目录内部- 而不是<path-to-project>/projects/<web-component-project>/src/app我styles.scss住的地方？

Answer 1

经过大量挖掘，我找到了应对挑战的解决方案。这是一个由两部分组成的问题：

无效的 scss 导入

首先，错误消息的Error: Failed to find...产生是因为 Angular 项目有多个.scss像这样导入的组件文件：@import '~projects/eddy-library/src/styles.scss';，并且与使用 tailwind 根本没有直接关系。我对这个问题的解决方案是删除导入。

Tailwind 和 Shadow DOM 的问题

其次，也许更重要的是，我的 Web 组件正在使用 Shadow dom，因此遵循设置 Tailwind 的指南不起作用。我在这里找到了一些讨论。唯一的解决方案似乎是放弃影子 DOM，这在我的特定用例中实际上没问题，但我想知道在这种情况下其他 Web 组件会做什么。

我希望这个答案可以帮助其他有同样困扰的人。非常感谢所有试图提供帮助的人。