加载一个全局设置文件

在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求。比如为所有组件全局使用 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. Ubuntu - apt 下载源设置为阿里的源

    # 备份 sources.list cp /etc/apt/sources.list /etc/apt/sources.list.bak # 切换为阿里的源 echo "deb http:/ ...

  2. The file is inaccessible to Server.

    ArcGIS Unable to Start serviceserver安装后,启动服务失败,报错信息如下:Unable to Start service. Error (Server object  ...

  3. for...in 、Object.keys 、 Object.getOwnPropertyNames

    个人总结: 1.for...in 遍历的是对象的可枚举,非Symbol属性(包括自身和原型上的) 2.Object.keys 返回一个数组,是对象自身的可枚举属性 (非Symbol) 3.Object ...

  4. ARTS-2

    ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...

  5. 6.824 Lab 2: Raft 2B

    Part 2B We want Raft to keep a consistent, replicated log of operations. A call to Start() at the le ...

  6. css之——div模拟textarea文本域的实现

    1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...

  7. Jmeter 后置处理器--jp@gc - JSON/YAML Path Extractor & JSON Extractor

    后置处理器--jp@gc - JSON/YAML Path Extractor 1.需要下载插件,地址: 解压后把对应jar包放置对应的lib和lib/ext目录下,重启Jmeter: 2.在需要提取 ...

  8. Anaconda版本

    1. Anaconda各种版本 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 2. 多个Python环境 conda info -e c ...

  9. if——while表达式详解

    ①while循环的表达式是循环进行的条件,用作循环条件的表达式中一般至少包括一个能够改变表达式的变量,这个变量称为循环变量 ②当表达式的值为真(非零)(非空)时,执行循环体:为假(0)时,则循环结束 ...

  10. C#WebApi自动生成文档

    1.效果图 2.在webApi项目,打开Nuget,搜索WebApiTestClient,安装WebApiTestClient,注意是给HelpPage的 3.打开引入WebApiTestClient ...