样式预处理的利器：Vite轻松配置Scss、Less助力全局部署

2024-01-28 10:02:56

在 Vite 中轻松配置和部署 Sass 和 Less

在前端开发中，样式预处理工具可以让我们更轻松地编写、维护和组织 CSS 代码。Vite 是一个轻量级的构建工具，支持使用 Sass 和 Less 作为样式预处理工具。本文将逐步指导你在 Vite 中配置 Sass 和 Less，并将其部署到全局，以便在所有组件中轻松使用。

安装 Sass 和 Less

使用以下 npm 命令安装 Sass 和 Less：

npm install -D sass
npm install -D less

配置 Vite

在 Vite 的配置文件中（通常是 vite.config.js）：

添加插件：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    require('vite-plugin-sass')(),
    require('vite-plugin-less')(),
  ],
});

添加 CSS 文件：

css: [
  'src/styles.scss', // Sass 文件
  'src/styles.less', // Less 文件
],

添加构建命令：

build: {
  rollupOptions: {
    output: {
      chunkFileNames: 'assets/css/[name].css',
    },
  },
},

部署到全局

为了在所有组件中使用 Sass 和 Less 变量和混合，我们需要将它们部署到全局。

1. 创建全局 Less 文件

在 src 文件夹中创建一个名为 styles.less 的文件：

// 定义 Less 变量和混合

.cover() {
  background-color: $font-color-gray;
}

2. 在 Vue 文件中导入全局 Less 文件

在需要使用 Less 代码的 Vue 文件中，导入全局 styles.less 文件：

<style lang="less" scoped>
  // 使用 Less 变量和混合

  .my-component {
    @extend .cover;
  }
</style>

现在，所有组件都可以访问全局定义的 Less 代码。

示例

以下是一个示例，说明如何在 Vue 文件中使用全局部署的 Sass 和 Less：

<template>
  <div>
    <h1 class="heading">Sass is awesome</h1>
    <p class="paragraph">Less is also great</p>
  </div>
</template>

<style lang="scss" scoped>
// 使用 Sass 变量和混合

$font-color: #333;

.heading {
  color: $font-color;
  font-size: 2rem;
}

@mixin button-styles {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border: none;
}

.button {
  @include button-styles;
}
</style>