如何在 Laravel InertiaJS 中使用 VueJS 配置 Tailwind + Postcss

Posted 2023-03-07

【中文标题】如何在 Laravel InertiaJS 中使用 VueJS 配置 Tailwind + Postcss

【英文标题】：How to configure Tailwind + Postcss with VueJS in Laravel InertiaJS

【发布时间】：2020-09-21 11:54:57

【问题描述】：

我是使用 Intertia.js/Vue.js 设置 tailwind/postcss 配置的新手，希望对我的配置文件提供一些指导！

我的目标是能够在我的 vue 组件中编写 postcss/scss 样式，并能够使用 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"
    

【参考方案1】：

将此添加到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