加载一个全局设置文件

在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的:

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

然后增加下面的 webpack 规则:

{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/_variables.scss')
}
}

举个例子,如果你使用了 vuejs-templates/webpack,请如下修改 build/utils.js

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

在这个文件里,为了避免在最终编译后的文件中出现重复的 CSS,建议只包含变量、mixins 等。

来源:vue-loader官方文档

   https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

vue-cli项目中引入全局scss的更多相关文章

  1. 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常

    由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...

  2. [Vuejs] 在vue各个组件中应用全局scss变量

    需要安装一个插件:sass-resources-loader 1.执行安装命令: npm i sass-resources-loader --save-dev 2.修改vue-cli环境下build文 ...

  3. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  4. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  5. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  6. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  7. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  8. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  9. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

随机推荐

  1. SPEL 表达式解析

    Spring Expression Language 解析器 SPEL解析过程 使用 ExpressionParser 基于 ParserContext 将字符串解析为 Expression, Exp ...

  2. C++/C#结构体转化-二维数组

    String To bytes typedef struct VidyoClientInEventGroupChat_ { /*! Message (contents) to be sent to a ...

  3. iOS客户端使用教程

    使用须知 支持 ios9.0 以上系统,兼容 iphone.ipad.ipod 等设备. 电脑上用 PP 助手安装 Shadowrocket   Mac电脑上用PP助手安装Shadowrocket 下 ...

  4. 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...

  5. Lesson 4 The double life of Alfred Bloggs

    There are two type of people in the society. People who do manual works can higher payment than peop ...

  6. java 多线程并发问题总结

    java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...

  7. librdkafka 安装

    1,Git clone git clone https://github.com/edenhill/librdkafka.git 2,cd librdkafka/ 3,./configure 4,ma ...

  8. MySQL-快速入门(9)视图

    1.什么是视图 视图是一个虚表.视图可以进行查询.增加.修改.删除.进行修改.增加.删除,将影响基本表中的数据. 2.视图相对基本表的优势 1>简单化:看到的就是想要的字段列,可以简化后续查询. ...

  9. P2294 [HNOI2005]狡猾的商人(差分约束)

    P2294 [HNOI2005]狡猾的商人 对于每个$(x,y,w)$,连边$(x-1,y,w),(y,x-1,-w)$,表示前$y$个月的收益比前$x-1$个月的收益大$w$ 这样题目就转化为询问图 ...

  10. 去掉img与img之间,video与video之间默认的间距(3种方式)

    img,video{ /*第1种方式*/ border:; vertical-align: bottom; /*第2种方式*/ outline-width:0px; vertical-align:to ...