web-dev-qa-db-ja.com

新しいAngularプロジェクトのためのテールワインを設定する方法？

Tailwind CSSを使用して新しいAngularプロジェクトを作成します。私の現在のCLIバージョンは10.1.1です。私が今までやったこと：

  • ng new my-appを使用して新しいアプリを作成する
  • Angularルーティング=>はい
  • スタイルシートとしてSCSSを使用してください
  • プロジェクトのルートディレクトリでnpm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -Dを実行します。
  • SRCフォルダには、styles.scssファイルがあり、それを変更します。

。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  • プロジェクトのルートディレクトリでnpx tailwind initを実行します。
  • プロジェクトのルートディレクトリに新しいファイルを作成します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"),
          ],
        },
      },
    ],
  },
};
  • ルートディレクトリにはangular.jsonファイル[.____]があります。
    • キープロジェクト=> My-App => Architect => Build [。]
      • ビルダーを"builder": "@angular-builders/custom-webpack:browser",に変更する
      • オプションに追加します

。

"customWebpackConfig": {
    "path": "./webpack.config.js"
},
  • キープロジェクト=> My-App => Architect =>サーブ[。]
    • ビルダーを"builder": "@angular-builders/custom-webpack:dev-server",に変更する
    • オプションに追加します

。

"customWebpackConfig": {
    "path": "./webpack.config.js"
},
  • アプリのルートディレクトリからng serveを使ってアプリを実行します。

私はこのエラーを得ています

./src/styles.scss（./node_modules/css-loader/dist/cjs.js??ref--13-1 ../node_modules/@angular-devkit/build-angular/node_modules/postcsload_modules/postcsload_modules/postcsload_modules/postcss-loader.s /src???embedded../node_modules/Resolve-urlLoader ???ref--13-3-/node_modules/sass-loader/dist/cjs.js??ref--13-4 */node_modules/ POSTCSS-LOADER/DIST/CJS.JS ?? ./ src/styles.scss）モジュールビルド失敗（./dist/postcss-loader/dist/cjs.jsから）：ValidationError：無効なオプションオブジェクト。 POSTCSSローダーは、APIスキーマと一致しないオプションオブジェクトを使用して初期化されています。

  • オプションには不明なプロパティ 'Plugins'があります。これらのプロパティは有効です：オブジェクト{PostCsSoptions？、Execute？、SourceMap？ object.loader（/.../MY-APP/NODE_MODULES/postcss-load_modules/postcss-load_modules/postcss-load_modules/postcsss-loader/distules/dchema-utils/dist/validate.js:98:11）でvalidate（/:.../my-app/dist/validate.js:98:11）/index.js:43:28）

モジュールビルドのエラーが失敗しました（./node_modules/postcss-loader/dist/cjs.jsから）：ValidationError：無効なオプションオブジェクト。 POSTCSSローダーは、APIスキーマと一致しないオプションオブジェクトを使用して初期化されています。

  • 上記と同じテキスト

テールウィンドを正しく設定できますか？

javascriptangularwebpackangular-clitailwind-css
5
Question3r

インポートは 'tailwindcss'で、 'tailwind'ではありません：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
 _
2
txk