Как заставить конфигурацию postcss работать с Nuxt?

Мой проект Nuxt не получает конфигурацию для импорта postcss из nuxt.config.ts:

build: {
    postcss: {
        plugins: {
            "postcss-import": {
                path: ["../assets/css", "../components/@css", "../components"]
            }
        }
    }
}

Я получаю ошибку типа Error: Can't resolve 'style.css' in /projectroot/pages.

Тот же конфиг в postcss.config.js подхватывается нормально. Для проверки, если я изменю postcss.config.js так, чтобы он указывал на несуществующие каталоги, появится ошибка: Error: Failed to find 'style.css' in [list of configured directories].

Что мне нужно сделать, чтобы это заработало из nuxt.config.ts? Обратите внимание, что я использую Typescript (nuxt-ts).


5 343
2

Ответы:

Вот как я его использую:

Я импортирую файл css, как обычно, и добавляю конфигурацию postcss в свойство строитьnuxt.config.js.

  css: ['~/assets/css/tailwind.css'],
  build: {
    postcss: {
      plugins: {
        'postcss-import': true,
      }
    }
  }

Из документации NuxtJS

С этой конфигурацией я также могу использовать тег <style lang = "postcss"> внутри файлов Vue.


У меня был файл с именем postcssrc.js

    "plugins": {
          "postcss-import": {},
          "postcss-url": {},
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": {}
          }

Я удалил его и в файле nuxt.config.js добавил следующий код:

        build: {
        postcss: {
          plugins: {
          "postcss-import": {},
          "postcss-url": {},
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": {}
          }
        }
      }

Затем в package.json я запускал скрипты:

"build":"nuxt build"