在vue项目中全局引入一个 .scss文件

dcr309duan 发布于2019-08-29 15:39 / 440人阅读

摘要：需求在用开发项目的时候，有这样的一个需求我有个的公共文件需要在项目的每个文件使用，而不用分别在文件中引入。第一步首先要下载第二步，在项目里找到文件。在上面的文件里用引入其他文件。

需求：在用vue-cli开发项目的时候，有这样的一个需求：我有个.scss的公共文件需要在项目的每个 .vue 文件使用，而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-loader 。

（1）第一步：
首先要下载： sass-resources-loader

npm install sass-resources-loader --save-dev

（2）第二步，在项目里找到build/utils文件。并找到下图位置

然后在scss: generateLoaders("sass")后面加上以下代码：

.concat(
      {
        loader: "sass-resources-loader",
        options: {
          // 需要全局引入的sass文件，这里引入了的scss文件，在所有的.vue文件都可以用到这份css样式，
          // 下面的resources接受一个数组，可以添加多个scss文件
          resources: [path.resolve(__dirname, "../src/assets/sass/index.scss")]
        }
      }
    )

（3）此时文件已经配置成功，需要重启npm run dev服务才可以看到效果.

（4）如果要导入多个文件,有两种办法：

1、在上面代码的resources数组选项增加多一个scss文件路径。
2、在上面的index.scss文件里用@import引入其他scss文件。

云服务器 GPU云服务器在c语言中全局变量 php中引入文件. cdn引入vue webrtc怎么实际应用在项目中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113464.html

在vue项目中全局引入一个 .scss文件

摘要：需求在用开发项目的时候，有这样的一个需求我有个的公共文件需要在项目的每个文件使用，而不用分别在文件中引入。第一步首先要下载第二步，在项目里找到文件。在上面的文件里用引入其他文件。需求：在用vue-cli开发项目的时候，有这样的一个需求：我有个.scss的公共文件需要在项目的每个 .vue 文件使用，而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-l...

宠来也 2019-08-26 12:02 评论0 收藏0
小程序开发

摘要：开发前准备环境版本微信开发工具最新版最新版文档本项目技术栈基于微信小程序快速开始克隆项目进入项目安装依赖启动构建打开微信开发工具，导入项目目录结构构建相关配置相关打包相关第三方模块源代码全局公用方法所有页面文件业务组件图片字体等静态资源业务开发前准备环境: Node.js LTS版本微信Web开发工具最新版 git 最新版文档: 本项目技术栈基于 ES2016 VueJS ...

ghnor 2019-08-26 12:10 评论0 收藏0
手把手教你写 Vue UI 组件库@vue2.0

摘要：手把手教你写组件库最近在研究的实现，发现网上很少有关于插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。手把手教你写 Vue UI 组件库最近在研究 muse-ui 的实现，发现网上很少有关于 vue 插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。笔者结合官方文档，与自己的摸索总结，以最简单的 FlexBox 组件为例子，带大家入门 v...

Keagan 2019-08-20 17:02 评论0 收藏0