Как настроить Tailwind css с помощью angular, ng-zorro-antd и less?

ProgramBox

Как настроить Tailwind css с помощью angular, ng-zorro-antd и less?

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#angular #webpack #less #tailwind-css #ng-zorro-antd

#angular #webpack #Меньше #tailwind-css #ng-zorro-antd

Вопрос:

Я пытаюсь интегрировать Taiwind CSS в Angular проект, используя ng-zorro-antd и less .

У меня ошибка:

 ERROR in ./src/styles.less (./node_modules/css-loader/dist/cjs.js??ref--15-1!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./node_modules/postcss-loader/src??postcss!./src/styles.less)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find './themes/index'
  in [
    /Users/iguissouma/idea/test-ant-less-tailwind/node_modules/ng-zorro-antd/style
  ]
    at resolveModule.catch.catch (/Users/iguissouma/idea/test-ant-less-tailwind/node_modules/postcss-import/lib/resolve-id.js:35:13)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Образец репозитория проекта, созданный с использованием angular-cli и добавленных ng-zorro-antd @nartc/tailwind-schematics схем.

Есть идеи, как решить эту проблему?

1. Пожалуйста, взгляните на этот репозиторий, может быть, вы сочтете его полезным — github.com/trungk18/jira-clone-angular

2. вы пробовали использовать ng-tailwind? npmjs.com/package/ng-tailwindcss

3. @Stefan Я был вдохновлен этим проектом jira-clone-angular, но он использует простой css и не меньше.

4. @BrunoCerecetto Я использовал @nartc /tailwind-схемы, которые обеспечивают интеграцию, которая должна работать, но вызывает некоторые проблемы с less.

5. В общем, у меня тоже проблема с tailwind и scss angular-material. Я не могу создать какой-либо @import в файле styles, потому что сборки завершаются неудачно.

Ответ №1:

Спасибо, что упомянули мой проект jira clone! Вы правы, я импортировал CSS только из ng-zorro в Jira clone, но новый стиль я написал с использованием синтаксиса SCSS. Я вспомнил, что мне также пришлось включить sass-loader в конфигурацию webpack, чтобы это работало.

Я скачал ваш исходный код и получаю точно такую же проблему.

Я также начинаю добавлять в проект less-loader. Я думаю, что необходим меньший загрузчик, потому что, если вы используете только postcss-less, этого будет недостаточно. Они не совпадают.

 npm install less less-loader --save-dev

Вот как это выглядит. Параметр less javascriptEnabled взят из одной проблемы из ant.

https://github.com/ant-design/ant-motion/issues/44

 module.exports = {
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              syntax: "postcss-less",
              plugins: () => [
                require("postcss-import"),
                require("tailwindcss")("./tailwind.config.js"),
                require("autoprefixer"),
              ],
            },
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

Он прошел через процесс сборки, но это заняло почти 10 минут, смотрите пятьсот тысяч миллисекунд на скриншоте. Не уверен, почему это заняло так много времени. Вы нашли другое лучшее решение?

1. спасибо за ваш ответ, после некоторых исследований я пришел с webpack.conf.js как и у вас (с javascriptEnabled: true), но сборка выполняется очень медленно, и некоторое время она зависает, и когда она была успешной, почему-то tailwind не работает.

2. Как вы импортируете tailwind? [at] импорт ‘tailwindcss/ base’; не работает -> tailwind / node_modules / tailwindcss/base.less не существует, поэтому я использовал [at] импорт ‘tailwindcss/base.css’; но компиляция зависает

3. Я использовал тот же файл less, который вы предоставили в репозитории, с простым импортом «tailwindcss / base». Возможно, проще всего добавить расширение .css, например, импортировать «tailwindcss/base.css». Я протестирую это и дам вам знать

4. Это все еще зависает 😂 Позвольте мне дать награду за этот вопрос

Ответ №2:

В качестве альтернативы вы можете использовать scss в своем проекте angular и less только для стиля темы ng-zorro. затем включите оба файла styles.scss и theme.меньше файлов в angular.json.

добавьте эти tailwinds в файл styles.scss и получите точно такой же webpack.config.js с помощью проекта-клона jira от @trungk18.

В принципе, решение состоит в том, чтобы позволить angular обрабатывать стиль scss и less, а ваш дополнительный пользовательский веб-пакет должен обрабатывать формат scss только для tailwind.