我正在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')
]);
反正有解决此问题的方法。
答案 0 :(得分:0)
似乎这可能是Laravel Mix中的错误,请参见this issue。
尝试将以下内容添加到您的Mix配置(source):
.webpackConfig({
module: {
rules: [
{
test: /\.(postcss)$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
],
},
})
答案 1 :(得分:0)
要使上述答案起作用,请确保创建一个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]