加载一个全局设置文件

在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求。比如为所有组件全局使用 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. 代码测试:unsigned char*图像数据转换成OpenCV中Mat类型

    直接使用Mat的构造函数,把指针的位置赋给下面中的data就OK了: Mat(int rows, int cols, int type, void* data, size_t step=AUTO_ST ...

  2. 【算法与数据结构】图的最小生成树 MST - Prim 算法

    Prim 算法属于贪心算法. #include <stdio.h> #define VERTEXNUM 7 #define INF 10000 typedef struct Graph { ...

  3. PHPFPM模式三种运行模式

    1.static模式 static模式始终会保持一个固定数量的子进程,这个数量由pm.max_children定义.   2.dynamic模式 子进程的数量是动态变化的,启动时,会生成固定数量的子进 ...

  4. [Vim] 02 用 Windows 下的 gVim 假装 Linux 下的 Vim

    0. 前言 这应该是极简配置,"极简"就是字面意思 我安装的版本是 8.1.1 来看个素颜 1. 找到 _vimrc 文本 我装在 E:\Program Files (x86)\V ...

  5. [Jupyter Notebook] 01 这么多快捷键,我可顶不住!先记个八成吧

    0. 一些说明 为了入门 Python3 安装了 Anaconda,它集成了 Jupyter Notebook 1. 调出快捷键表 打开 Jupyter Notebook,新建一个 Python3(我 ...

  6. Let's encrypt 通配域名DNS验证方式的证书自动更新

    通配符域名不同于一般的单域名证书. 为了解决之前一篇短文中通配域名通过DNS方式验证的证书自动更新问题. 需要使用到第三方域名提供商的API, 用于自动添加域名的TXT记录, 实现自动验证并完成证书更 ...

  7. Linux :环境变量设置和本地变量加载

    bash: 全局变量: /etc/profile,  /etc/profile.d/*,  /etc/bashrc 个人变量: ~/.bash_profile,   ~/.bashrc bash运行方 ...

  8. go & RabbitMQ

    参考 RabbitMQ tutorial - 官方示例 Go code for RabbitMQ tutorials - 官方示例源码 go语言开发RabbitMQ-牛刀小小试试

  9. C#配合大数据开发,nest.dll的使用

    一,添加Nest.dll引用 结果如下多了如下DLL: Elasticsearch.Net.dll,Nest.dll 二,上代码: using Common.EsModel; using Elasti ...

  10. 网络爬虫之JSOUP

    JSOUP中文文档:http://www.open-open.com/jsoup/推荐博客:http://www.cnblogs.com/jycboy/p/jsoupdoc.html 从一个URL加载 ...