0

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

我的目标是能够在我的 vue 组件中编写 postcss/scss 样式，并能够使用 postcss @apply 功能，例如：

导航.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'),
    ],
};

包.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"
    }
}
4

1 回答 1

0

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

于 2021-06-18T15:19:14.360 回答