External css files are not effecting look of the site

teethgrinder commented 2 years ago

Hello thanks for this wonderful repo. I am strugling to import my styles into my django-vite application with vue frontend using tailwind css; my two files are under 'assets/css' directory and named custom.css and style.css: my main.js:

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
import '@/assets/css/custom.css';
import '@/assets/css/style.css';
import router from './router/index.js';
import * as apolloProvider from './apollo-provider.js' 
createApp(App).use(router).use(apolloProvider.provider).mount('#app')

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//import 'vite/modulepreload-polyfill.ts'

const path = require("path");
const { resolve } = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/static/',
  server: {
    host: 'localhost',
    port: 3000,
    open: false,

    watch: {
      usePolling: true,
      disableGlobbing: false,
    }
  },
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      "$$": path.resolve(__dirname, "./src"),
      "##": path.resolve(__dirname, ""),
    },
  },
  build: {
    outDir: resolve('./dist'),
    assetsDir: '',
    manifest: true,
    emptyOutDir: true,
    target: 'es2015',
    rollupOptions: {
      input: {
        main: resolve('./src/main.ts'),
      },
      output: {
        chunkFileNames: undefined,
      },
    },
  }
})

tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './src/**/*.{html,js}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:  {
      fontFamily: {
      'body': ['Karla', 'sans-serif'],
      'title': ['Karla', 'sans-serif']
      },
      colors: {
        'pri':  '#081F4D'
      }
    }, 
  },
  variants: {
      extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

index.css:

@import './assets/css/custom.css';
@import './assets/css/style.css';

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

my index.html in django is

{% load django_vite %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>| Active English Online </title>
    {% vite_hmr_client %}
  </head>
  <body>
    <div id="app"></div>
    {% vite_asset 'src/main.ts' %}
  </body>
</html>

I can view page but my custom stylesheets are not loaded ? how can I fix it ? Thanks

MrBin99 commented 2 years ago

Do you import your index.css file inside your main.js ?

teethgrinder commented 2 years ago

sorry paste error, I have added them in main.js file. I have edited my question.

MrBin99 commented 2 years ago

What is content key in vite.config.js ?

teethgrinder commented 2 years ago

it is in tailwind.config.js but i have wrongly written vite.config.js.. I have changed it. but still same.

MrBin99 commented 2 years ago

You have a main.js file and you are importing main.ts in your index.html. Copy/paste error ?

teethgrinder commented 2 years ago

you are right that error comes from that line, I edited that line. if any one needs, last form is like below. new tailwind.config.js:

module.exports = {
  //content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', "./src/**/*.{html,js}"],
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}',],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:  {
      fontFamily: {
      'body': ['Karla', 'sans-serif'],
      'title': ['Karla', 'sans-serif']
      },
      colors: {
        'pri':  '#081F4D'
      }
    }, 
  },
  variants: {
      extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

postcss.config.js:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

and main.js

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
import './assets/css/custom.css';
import './assets/css/style.css';
import router from './router/index.js';
import * as apolloProvider from './apollo-provider.js' 
createApp(App).use(router).use(apolloProvider.provider).mount('#app')

MrBin99 commented 2 years ago

All your errors are gone ? You see your page with CSS ?

teethgrinder commented 2 years ago

Yes it works, thanks for you help and wonderful repo.

MrBin99 commented 2 years ago

No problem, thanks !

MrBin99 / django-vite

External css files are not effecting look of the site #26