在vue中引用全局的SCSS样式

凌云的视界

于 2021-06-23 17:46:38 发布

阅读量883

点赞数

分类专栏：工作笔记封装组件前端布局文章标签： vue css

本文链接：https://blog.youkuaiyun.com/weixin_38680881/article/details/118158443

版权

工作笔记同时被 3 个专栏收录

25 篇文章

订阅专栏

封装组件

5 篇文章

订阅专栏

前端布局

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中避免代码冗余，通过全局引入SCSS公共样式提升代码效率。首先在src/assets下创建global.scss，然后修改build配置，使用'sass-resources-loader'确保全局引入正确路径的全局样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

发现公司所做的VUE项目虽然引入了SCSS,并且做了公共样式的封装，但是在引用的时候却在每个组件写样式的地方都在引入了一遍，很明显，这样的代码是冗余不必要的。于是我重新做了在全局引入scss的公共样式。

技术实现

在src的assests 下新建一个global.scss文件，把全局样式或者要复用的样式放到这里
修改build中文件如下

贴上上面的代码

scss: generateLoaders('sass').concat(
    {
    loader: 'sass-resources-loader',
    options: {
        resources: path.resolve(__dirname, './../src/assets/styles/global.scss')
    }
    }
),

特别要注意的是resources: path.resolve(__dirname, ‘./…/src/assets/styles/global.scss’) 这个地方一定要按照自己文件位置按相对路径引入！！！