I am completely baffled...this marks my second vue.js project. When I try to push the site live, it's causing me a lot of trouble.
The application functions perfectly locally, but after deploying to netlify and building it, the CSS seems to be malfunctioning. I have included purgecss in my postcss.config.js file:
const IN_PRODUCTION = process.env.NODE_ENV === 'production';
module.exports = {
plugins: [
require('tailwindcss')('tailwind.js'),
require('autoprefixer')(),
IN_PRODUCTION &&
require('@fullhuman/postcss-purgecss')({
content: ['./public/**/*.html', './src/**/*.vue'],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(
/<style[^]+?<\/style>/gi,
''
);
return (
contentWithoutStyleBlocks.match(
/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
) || []
);
},
whitelist: [],
whitelistPatterns: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/,
/data-v-.*/,
],
}),
],
};
Following the Tailwind CSS and PurgeCSS guidelines. It works fine locally, but not in production.
The Netlify build command is npm run build and it is served from the dist folder.
You can view the app here: And find the repository here: https://github.com/mrpbennett/beautify-url
I am not using scoped on my style tags
Any suggestions or ideas would be greatly appreciated.