Vue项目自动注入less、sass、scss、stylus全局变量-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue项目自动注入less、sass、scss、stylus全局变量。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue2项目

// vue.config.js
const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设有 `src/assets/style/var.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/assets/style/var.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/assets/style/var.scss";`
      },
      // 
      less:{
        additionalData: `@import "~@/assets/style/var.less";`
      },
      stylus: {
        import: path.join(__dirname, './src/assets/style/var.styl')
      }
    }
  }
}

官方文档：CSS 相关 | Vue CLI

二、Vue3项目

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import path from 'path'

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/style/var.less";`,
      },
      sass: {
        additionalData: `@import "@/assets/style/var.sass"`,
      },
      scss: {
        additionalData: `@import "@/assets/style/var.scss";`,
      },
      stylus: {
        imports: [path.resolve(__dirname, './src/assets/style/var.styl')]
      }
    },
  }
})

2024-4-9文章来源地址https://www.toymoban.com/news/detail-852591.html

到了这里，关于Vue项目自动注入less、sass、scss、stylus全局变量的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！