recommended way of handling css (like bootstrap etc)

[jnarowski]

Is there a recommended best practice for this? I've imported it in the main.js file before like this:

import 'bootstrap/dist/css/bootstrap.css'
import 'vue-notifyjs/themes/default.scss'
import './assets/sass/light-bootstrap-dashboard.scss'
import './assets/sass/application.scss'
import './pollyfills'

I see you import your design variables in each style tag, but what about overall css like bootstrap, global application stuff etc?

[jnarowski]

I do see imports and css in the app.vue file. Is that were you think we should import our application.scss files?

[alexdilley]

I do see imports and css in the app.vue file. Is that were you think we should import our application.scss files?

I'd say so, yes. For example, for a base Tailwind CSS install, this is the full content of the <style> section of my src/app.vue root component:

<style lang="postcss">
/**
 * This injects Tailwind's base styles, which is a combination of Normalize.css
 * and some additional base styles.
 */
@import 'tailwindcss/preflight';

/**
 * This injects any component classes registered by plugins.
 */
@import 'tailwindcss/components';

/**
 * This injects all of Tailwind's utility classes, based on its config file.
 */
@import 'tailwindcss/utilities';
</style>