Как настроить попутный ветер с помощью пользовательского веб-компонента Angular

Question

Моя цель - настроить Tailwind CSS с помощью проекта пользовательского веб-компонента Angular. Из-за настраиваемого веб-компонента я использую ngx-build-plus:browser для обслуживания и сборки (потому что это может помочь объединить все в один пакет).

Затем я следовал этому руководству для реализует 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'),
                    ],
                },
            },
        ],
    },
};

serve-command

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

Думаю, это проблема пути. Вместо того, чтобы передавать extra-webpack-config в --extra-webpack-config webpack.config.js, можете ли вы поместить его в файл angular.json?

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

Эта схема c была выпущена вчера и включает в себя множество идей и методы интеграции Tailwind CSS с Angular:

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

Answer 2

После долгих копаний я нашел решение этой проблемы. Это была проблема из двух частей:

Inavlid s css импорт

Во-первых, сообщение об ошибке Error: Failed to find... возникло из-за того, что проект Angular имел несколько компонентов .scss файлы импортируются следующим образом: @import '~projects/eddy-library/src/styles.scss';, и никак не связаны напрямую с попутным ветром. Мое решение этой проблемы состояло в том, чтобы удалить импорт.

Проблемы с Tailwind и теневым DOM

Во-вторых, что, возможно, более важно, было то, что мой веб-компонент был используя shadow dom, и поэтому следование руководствам по настройке Tailwind не помогло. Что-то я нашел обсуждение здесь . Единственным решением, похоже, является отказ от теневой DOM, что-то действительно нормально в моем конкретном c варианте использования, но мне интересно, что другие веб-компоненты будут делать в этом случае.

Надеюсь, этот ответ может помочь другим люди с такими же проблемами. Большое спасибо всем, кто пытался помочь.

Answer 3

Я попытался восстановить эту проблему, но безуспешно. Мой проект работает без ошибок. вот репо проекта попутный ветер css -в- 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 в root вашего проект (т.е. где у вас находится файл 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.s css.

    /* 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 не компилируется

Я не знаю, что происходит в вашем проекте и что вызывает ошибку, но я почти уверен, что это не имеет ничего общего с попутным ветром css его сообщение css -import, вызывающее проблему.