我试图在我的sass文件中使用@apply，当我执行npm run dev或npm run watch时，标题中出现了错误。我在用Laravel和Laravel混合。这是我的webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
这存在于我的app.css中
...
.bg-blue {
background-color: #47cdff;
}
我的应用程序：
// Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
// Custom CSS
.section {
@apply .px-4;
}
.button {
@apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
box-shadow: 0 2px 7px 0 #b0eaff;
}
只需重写默认的颜色盘，您可以使用tailwind.config.js文件的theme.colors部分来完成此操作：
theme: {
colors: {
white: '#FFFFFF',
blue: '#007ace',
}
}
那么一个简单的技巧就是永远不要在同一个文件中混合常规的CSS和导入。相反，为导入创建一个主入口点文件，并将所有实际的CSS保存在单独的文件中。
