Вернуться назад

Vite

npm create vite@latest my-vue-app

# Запустить сервер:
npm run dev

# Если мы после создания проекта не устанавливали зависимости, то сначала надо их установить:
npm install

# Собрать готовый проект:
npm run build

Подключаем scss:

<style lang="scss" scoped>
    .zzz {
        color: red;
    }
</style>

Если мы ещё не устанавливали sass-embedded, то скорее всего получим следующую ошибку: [plugin:vite:css] Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`. Поэтому установим sass-embedded:

# Установить sass-embedded
npm install -D sass-embedded

Чтобы алиас "@" заработал:

// vite.config.js

import { defineConfig } from 'vite'
import logo from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Теперь можно использовать в шаблоне импортированную картинку:

<!-- src/components/Govno.vue -->

<template>
    <div><img v-bind:src="logo" /></div>
</template>

Если после сборки проекта в папке dist/assets/ нет изображения в отдельном файле, значит оно встроено в файл скрипта: index-7ZSap2X8.js. Vite встраивает содержимое картинки прямо в JavaScript, если файл меньше, чем ~4KB.