tailwindcss @apply 디렉티브가 vue 구성 요소 내에서 작동하지 않음

tailwindcss @apply 디렉티브가 vue 구성 요소 내에서 작동하지 않음

새로운 프로젝트 문제를 해결하기 위해 제트스트림 및 관성 vue 스택을 사용하여 일반 애플리케이션을 만듭니다.Tailwindcs버전 2 사용postCss또, 서포트도 되지 않습니다.@applyvue 구성 요소 내부와 내부 지시어.css파일은 정상적으로 동작합니다.이 css 파일은 내가 원하는 모든 페이지를 로드하기 때문에 나는 그것을 원하지 않습니다.@apply'어떻게 하면 좋을까요? '라고 지시했지만 할 수 없습니다.

vue 템플릿 내

<template>
 <div class="mt-4">
  <label for="hello">Hello</label>
  <input id="hello" class="input"/>
 </div>
</templete>

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

output inside browser like this

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

tailwind version : "^2.0.1",
laravel version : 8.x,
jetstream version : 2.x,
inertiajs version: "^0.8.2"

를 설정할 필요가 있습니다.lang="postcss"의 속성<style>Tailwind 태그는 PostCSS 플러그인입니다.

그럼 이걸 바꿔봐

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

이것을 위해서

<style lang="postcss" scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

이 문제를 일시적으로 해결할 수 있는 회피책:

.

인webpack.config.js

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve('resources/js')
    }
  },
  module: {
    rules: [
      {
        test: /\.(postcss)$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}

.

인postcss.config.js(이 파일이 존재하지 않는 경우 작성만 하면 됩니다.)

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer')
  ]
}

.

이제 다음을 추가하여 Vue 파일에서 사용할 수 있습니다.lang="postcss

<style lang="postcss">
.input-form {
  @apply block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}
</style>

.

이 답변은 https://github.com/laravel-mix/laravel-mix/issues/2778#issuecomment-826121931에 기재되어 있습니다.

postcss.config.js를 만들고 다음 스니펫을 추가하면 문제가 없습니다.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

언급URL : https://stackoverflow.com/questions/65739676/tailwindcss-apply-directive-doesnt-work-inside-vue-component