前写时间在写项目的时候使用到了tailwindcss,该框架使用PostCSS作为预处理器,然而在使用tailwindcss的@apply方法时编译器出现了错误。
我的配置如下:
- laravel 8.4
- vue 3.0.11
- postcss 8.3
- tailwindcss 2.0.2
解决方案
这似乎是因为没有postcss.config.js文件造成的(在tailwindcss的官方安装方法里并没有这个在Laravel中安装TailwindCSS),最终在laravel-mix的GitHub上找到了解决方案。
创建一个postcss.config.js文件在项目根目录中
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
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] : []
]
}
请注释掉最后的生产优化,启用的话会导致预设的生产优化不起作用
然后将以下代码加入到你的mix配置中
.webpackConfig({
module: {
rules: [
{
test: /\.(postcss)$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
],
},
})
这样就可以成功编译了
Comments | 2 条评论
很久没更新了啊,来催更了。。。
@牧之 hhhhh我老鸽子了,会更新的,不要急