vue3 + vite引入scss全局变量

最新推荐文章于 2024-05-16 22:02:09 发布

月明泉清

最新推荐文章于 2024-05-16 22:02:09 发布

阅读量4.4k

点赞数 4

分类专栏：前端文章标签： vue.js sass css

本文链接：https://blog.csdn.net/domyself918/article/details/124661580

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

情境：

使用了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-----

月明泉清

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
18
评论
vue3 + vite引入scss全局变量

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

扫一扫