angular - 如何使用 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"]
}

项目//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 .我按照以下步骤操作。

创建一个新的 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

那么，为什么会出现错误？我用谷歌搜索了你的错误，发现这些有趣的链接你可以查看 或者你可以直接使用我的样板项目
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。