@apply在Laravel Mix中的Vue组件内部不起作用

2024-05-03 • 问答

我正在Laravel和VueJS组件中使用Tailwind CSS。

<template>

</template>

<script>

</script>

<style lang="postcss" scoped>

    .day-disabled {

        @apply text-gray-400;
    }

</style>

但是它抱怨

Module parse failed: Unexpected token (685:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .day-disabled {
|
|     @apply text-gray-400;

无论如何，在使用Laravel Mix的VueJS组件中是否可以使用@apply指令。这是我的webpack.mix.js

const mix = require('laravel-mix');
mix.options({ extractVueStyles: true})
   .js('resources/js/app.js','public/js')
   .postCss('resources/css/app.css','public/css',[
       require('postcss-import'),require('tailwindcss'),require('postcss-nested'),require('postcss-custom-properties'),require('autoprefixer')
   ]);

反正有解决此问题的方法。

bbsliangjigang 回答：@apply在Laravel Mix中的Vue组件内部不起作用

似乎这可能是Laravel Mix中的错误，请参见this issue。

尝试将以下内容添加到您的Mix配置（source）：

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

要使上述答案起作用，请确保创建一个postcss.config.js文件（如果尚未创建）并将此代码段粘贴到其中

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        './resources/**/*.vue','./resources/**/*.js'
    ],whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/,/data-v-.*/,/v-deep/ ],whitelistPatternsChildren: [ /pretty$/,/xmx-.*$/,/^(.*?)\.tooltip/ ],defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
})

module.exports = {
    plugins: [
        require('tailwindcss'),require('autoprefixer'),...process.env.NODE_ENV === 'production' ? [purgecss] : []
    ]
}

这里是来源[https://github.com/JeffreyWay/laravel-mix/issues/2312]

laravel laravel-mix tailwind-css vue.js webpack

本文链接：https://www.f2er.com/3105717.html

@apply在Laravel Mix中的Vue组件内部不起作用

bbsliangjigang 回答：@apply在Laravel Mix中的Vue组件内部不起作用

大家都在问