How to configure Tailwind + Postcss with VueJS in Laravel InertiaJS

Я новичок в настройке конфигурации попутного ветра /postcss с помощью Intertia.js/Vue.js и был бы признателен за некоторые рекомендации с моими файлами конфигурации!

Моя цель - иметь возможность писать стиль postcss/scss в моих компонентах vue, например, с возможностью использования функции postcss @apply, например:

Navigation.vue:

<style lang="postcss">
  .nav-items {
      @apply bg-red;
  } 
</style>

При текущей настройке конфигурации у меня не возникает никаких ошибок при компиляции, однако стиль не применяется, он не отображается в стилях консоли для этого элемента.

webpack.mix.js

const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css/app.css')
    .options({
        postCss: [
            tailwindcss('tailwind.config.js'),
            ...mix.inProduction() ? [
                purgecss({
                    content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
                    defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
                    whitelistPatternsChildren: [/nprogress/],
                }),
            ] : [],
        ],
    })
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.runtime.js',
                '@': path.resolve('resources/js'),
                ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
            },
        },
        module: {
          rules: [
            {
                test: /\.postcss$/,
                loaders: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: { modules: true, importLoaders: 1 }
                    },
                    "postcss-loader",
                ]
            }
         ]
      }
    })
    .version()
    .sourceMaps()

tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: [
        './resources/views/**/*.blade.php',
        './resources/css/**/*.css',
    ],
    sourceMap: false,
    theme: {
        //...
    },
    plugins: [],
}

postcss.config.js:

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

package.json:

{
    //...
    "devDependencies": {
        "@babel/preset-env": "^7.9.6",
        "@tailwindcss/custom-forms": "^0.2.1",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "css-loader": "^3.5.3",
        "laravel-mix": "^5.0.1",
        "laravel-mix-tailwind": "^0.1.0",
        "lodash": "^4.17.13",
        "postcss-css-variables": "^0.17.0",
        "postcss-loader": "^3.0.0",
        "postcss-nesting": "^7.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.2.1",
        "tailwindcss": "^1.4",
        "vue-svgicon": "^3.2.6",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@inertiajs/inertia": "^0.1.9",
        "@inertiajs/inertia-vue": "^0.1.4",
        "alpinejs": "^2.3.5",
        "popper.js": "^1.16.1",
        "portal-vue": "^2.1.7",
        "postcss-import": "^12.0.1",
        "postcss-nested": "^4.2.1",
        "postcss-nested-ancestors": "^2.0.0",
        "vue": "^2.6.11",
        "vue-i18n": "^8.17.7",
        "vue-meta": "^2.3.3"
    }
}
Источник

2 ответа

Добавьте это в webpack.config.js :

      module: {
    rules: [
        {
            test: /\.(postcss)$/,
            use: [
                'vue-style-loader',
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
            ]
        }
    ],
},

Найдено здесь https://github.com/JeffreyWay/laravel-mix/issues/2211#issuecomment-546123921

Источник

Как упоминалось в документации TailwindCSS + Laravel Mix, просто добавьте.postCss() в свой файл микса с соответствующими путями.

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

mix
    .js('resources/js/app.js', 'public/js')
    .postCss('resources/css/tailwind.css', 'public/css', [
        require('tailwindcss'),
    ]);
Источник
Другие вопросы по тегам