Vue + scss 配置全局变量

[jtwang7]

Vue + scss 配置全局变量

参考文章：

• vue中scss设置全局变量，并使用
• vite 添加scss全局变量

Vue 中安装 scss 执行如下命令 (以 yarn 为例)

❇️ Vite 只需要安装 sass 依赖

yarn add sass

❇️ Webpack 则还需要安装 node-sass sass-loader 以下两个依赖

yarn add node-sass sass-loader

✅ 创建 scss 文件
创建一个存放全局变量的文件 global.scss

// 暗蓝色
$blue-color: #00c0d2;
// 屎黄色
$yellow-color: #febf00;

若项目通过 webpack 构建，则新建 vue.config.js 来配置 webpack 选项。

🔅 修改 vue.config.js 文件配置

module.exports = {
    css: {
        loaderOptions: {
            // 配置 sass-loader 参数
            sass: {
                // 若没有配置 @ 根路径别名，则将 @ 替换为正确的路径
                data: '@import "@/styles/global.scss";',
            },
        },
    },
};

若项目通过 vite 构建，则新建 vite.config.js 来配置 webpack 选项。

🔆 修改 vite.config.js 文件配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置文件根路径别名
    alias: [{
      find: '@',
      replacement: path.resolve('./src'),
    }]
  },
  css: {
    // 配置全局 scss 文件加载入口
    preprocessorOptions: {
      scss: {
        // 多个文件用 ' ; ' 分号分隔
        // additionalData: `@import "@/styles/global.scss; @import "@/styles/other-style.scss""`,
        additionalData: `@import "@/styles/global.scss";`,
      }
    }
  }
})

@import "@/styles/global.scss"; 中 ; 不能省略，否则会报错

✅ 在 css 中使用

.some-style {
  color: $blue-color
}