vue3 + vite引入scss全局变量

情境：使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。需求：想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。解决过程：全局变量前：globalstyle.scss的引入方式(在index.html中引入)//index.html<!DOCTYPE html&

月明泉清

4595人浏览 · 2022-05-09 10:56:21

月明泉清 · 2022-05-09 10:56:21 发布

情境：

使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。

需求：

想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。

解决过程：

全局变量前：

globalstyle.scss的引入方式(在index.html中引入)

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />


    <link rel="stylesheet" href="/src/assets/css/globalstyle.scss" /> 


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

改为全局变量后：

step1：
👇为修改后的vite.config.js 。

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        //additionalData: '@import"@/assets/css/globalstyle.scss";'
        //👆这样写是不行的。因为如果项目中其他的css文件有@forward关键字，就会提示错误
        additionalData: '@use "@/assets/css/globalstyle.scss" as *;'
       //👆这样写是可以的，但是要注意
       //!!!!一定要将其他地方引入该css文件的地方删除，如index.html,否则会提示已经加载该module的错误！！！
      }
    }
  }
})

step2：

千万记得将上图index.html中的

<link rel="stylesheet" href="/src/assets/css/globalstyle.scss" />

👆这句话千万记得注释掉！！！！！

-----end-----

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^