在 vue3 中 sass、less 安裝后既可使用

一、vue3 中集成 scss

1. 安裝依賴

npm install sass -D

2. 定義全局樣式

1. 新建 src\assets\base.scss 全局樣式文件

$bgColor: #ccc;

2. 在 vite.config.js 中配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/base.scss";`,
      },
    },
  },
});

3. 在組件中使用

<template>
  <div class="main">hello world</div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: $bgColor;
  color: blue;
}
</style>

二、vue3 中集成 less

1. 安裝依賴

npm install less -D

2. 定義全局樣式

1. 新建 src\assets\base.less 全局樣式文件

@bgColor: #ccc;

2. 在 vite.config.js 中配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/assets/base.less";`,
      }
    },
  },
});

3. 在組件中使用

<template>
  <div class="main">hello world</div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.main {
  background: @bgColor;
  color: blue;
}
</style>