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的仓库。我按照以下步骤操作。

创建一个新的角度项目。

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
```

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

 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'),
           ],
         },
       },
     ],
   },
 }

安装Dependecy软件包。

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

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

在您的styles.scss文件中导入顺风。

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

那么，为什么会出现错误？我搜索了您的错误，发现了这些有趣的链接，您可以检查，也可以直接使用我的boilerplat项目

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中传递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组件正在使用shadow dom，因此，按照设置Tailwind的指导无效。我发现有关here的讨论。唯一的解决方案似乎是放弃影子DOM，这在我的特定用例中实际上是可以的，但是我想知道在这种情况下其他Web组件还能做什么。

我希望这个答案可以帮助遇到同样麻烦的其他人。非常感谢所有尝试提供帮助的人。

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

3 个答案: