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

Question

我的 objective 是使用 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"]
}

项目//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 目录 - 而不是我的 styles.scss 所在的 <path-to-project>/projects/<web-component-project>/src/app？

Answer 1

我试图重现这个问题，但没有成功。我的项目运行s 没有任何错误。这是项目 tailwindcss-in-angular 的回购协议。我遵循了以下步骤。

创建一个新的 angular 项目。

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

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

ng generate application web-component-project

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

在项目的根目录创建一个 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'),
           ],
         },
       },
     ],
   },
 }

安装依赖包。

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

生成 tailwind.config.js 文件。
```
 npx tailwindcss init
```

在您的 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";

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

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

运行项目。

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

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

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

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

这个link说你的项目可能在C盘，你可以把它移到其他盘。

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

Answer 2

我认为这可能是一个路径问题。除了在 --extra-webpack-config webpack.config.js 中传递 extra-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 和阴影问题 DOM

其次，也许更重要的是，我的 Web 组件使用的是影子 dom，因此遵循设置 Tailwind 的指南没有用。我发现了关于 here 的讨论。唯一的解决方案似乎是放弃阴影 DOM，在我的特定 use-case 中确实可以，但我想知道在这种情况下其他 Web 组件会做什么。

希望这个回答能帮助到其他有同样烦恼的人。非常感谢所有试图提供帮助的人。

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

How to setup tailwind with Angular custom web component

angular

tailwind-css