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

Question

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

我随后关注 this guide 来实现 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

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

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    syntax: 'postcss-scss',
                    plugins: () => [
                        require('postcss-import'),
                        require('tailwindcss'),
                        require('autoprefixer'),
                    ],
                },
            },
        ],
    },
};

服务命令

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"]
}

projects//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

我尝试重新生成此问题，但没有成功。我的项目运行没有任何错误。这是项目tailwindcss-in-angular 的回购。我按照以下步骤操作。

1. 创建一个新的 Angular 项目。

   ng new tailwindcss-in-angular --create-application=false
   

2. 在项目中生成新的应用程序。

   ng generate application web-component-project
   

3. 将 ngx-build-plus 库添加到项目中。 （我们需要使用--project 选项将其添加到新生成的应用程序中）

   ng add ngx-build-plus --project getting-started
   

4. 在项目的根目录下创建一个 webpack.partial.js 文件（即你的 angular.json 文件所在的位置）

    const webpack = require('webpack');
   
    module.exports = {
      module: {
        rules: [
          {
           test: /\.scss$/,
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: () => [
                require('postcss-import'),
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        ],
      },
    }
   

5. 安装依赖包。

    npm i autoprefixer postcss-import postcss-loader postcss-scss tailwindcss
   

6. 生成tailwind.config.js 文件。

    npx tailwindcss init
   

7. 在您的 styles.scss 文件中导入 tailwind。

    /* You can add global styles to this file, and also import other style files */
    @import "tailwindcss/base";
   
    @import "tailwindcss/components";
   
    @import "tailwindcss/utilities";
   

8. 从 app.component.html 中删除所有内容并使用以下标记对其进行更新。

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Button
    </button>
   

9. 运行项目。

    ng serve --project web-component-project -o --extra-webpack-config webpack.partial.js
   

那么，为什么会出现错误？我用谷歌搜索了你的错误，发现这些有趣的链接你可以检查或者你可以直接使用我的样板项目

https://github.com/angular/angular-cli/issues/12981

https://github.com/vuejs-templates/webpack/issues/1066

此链接表示您的项目可能位于 C 驱动器中，您可以将其移动到其他驱动器中。 ng serve won't compile

我不知道您的项目中发生了什么以及导致错误的原因，但我很确定它与 tailwindcss 无关，它是导致问题的 postcss-import。

Answer 2

我认为这可能是路径问题。除了在--extra-webpack-config webpack.config.js 中传递额外的webpack-config 之外，您可以将它放在angular.json 文件中吗？

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
           "path": "webpack-dev.config.js"
        }
      }   
    }
  }
}

这个原理图是昨天发布的，封装了很多将 TailwindCSS 与 Angular 集成的想法和技术：

https://github.com/nartc/tailwindcss-schematics#readme

Answer 3

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

无效的 scss 导入

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

Tailwind 和影子 DOM 的问题

其次，也许更重要的是，我的 Web 组件正在使用 shadow dom，因此遵循设置 Tailwind 的指南不起作用。我发现关于here 的讨论。唯一的解决方案似乎是放弃 shadow DOM，这在我的特定用例中实际上还可以，但我想知道在这种情况下其他 Web 组件会做什么。

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