之前在用vue-cli3框架的时候对于常用的less 、sass 变量都是需要时就在单文件中引入文件,这样做比较麻烦。那么基于 vue-cli3 如何配置全局的less 、sass 变量?

《1》安装
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 《2》vue.config.js配置 1.配置全局less变量
//第三方插件
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//这个是加上自己的路径,注意:试过不能使用别名路径
path.resolve(__dirname, "./src/assets/variable.less")
]
}
} 2.配置全局sass变量
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
data: `@import "~@/variables.scss";`
}
}
}

  经过这么点小优化,就无需在需要使用变量时在单文件中引入一次文件

vue-cli3 配置全局less 、sass 变量的更多相关文章

  1. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  4. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  5. vue中怎么全局引入sass文件

    1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass') ...

  6. vue cli3 配置postcss

    1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...

  7. vue cli3如何引入全局less变量

    最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...

  8. 通过 sass-resources-loader 全局注册 Sass/Less 变量

    使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的 ...

  9. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

随机推荐

  1. web前端三大主流框架的对比

    MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来 ...

  2. php 大数组 foreach 循环嵌套的性能优化

    前提:最近在做后台的时候,页面加载太慢,故第一时间想到的自然是优化SQL, 优化后sql查询速度从 2秒变成了零点几秒, 以为就这麽完事了,然并卵,加载竟然花费30秒! 这麽慢,然后在代码中分块记录它 ...

  3. Sql server 中count() 与 sum() 的区别

    一句话概括就是Sum(列) 是求和,把所有列的值进行汇总求和:COUNT(列) 是行数汇总,只要列的值不为Null,就会增加1: 举个例子说明下: --创建临时表结构 CREATE TABLE Tem ...

  4. springboot整合thymeleaf——引用静态资源

    原html src="/css/index.css" thymeleaf中,th:src="@{/css/index.css}"

  5. go slice切片注意跟数组的区别

    一个 slice 会指向一个序列的值,并且包含了长度信息. []T 是一个元素类型为 T 的 slice. [2]string 这样定义久是字符数组 []string 这样定义就是切片 表面上看切片就 ...

  6. c++学习-----引用

    引用相当于给一个对象起个别名 必须初始化 引用只是与一个对象bind,所以引用无法改变 引用不是一个对象,所以没有引用的引用 引用的初始化值必须是一个对象,而不能是字面量或表达式 引用不是地址,所以引 ...

  7. 将迁移学习用于文本分类 《 Universal Language Model Fine-tuning for Text Classification》

    将迁移学习用于文本分类 < Universal Language Model Fine-tuning for Text Classification> 2018-07-27 20:07:4 ...

  8. PHP迭代生成器---yield

    1.迭代生成器 生成器的核心是一个yield关键字,一个生成器函数看起来像一个普通的函数,不同的是:普通函数返回一个值,而一个生成器可以yield生成许多它所需要的值.生成器函数被调用时,返回的是一个 ...

  9. hdu 6216 A Cubic number and A Cubic Number

    题意:给定一个素数,判定它是不是两个立方数之差. 题解:对于a^3+b^3=(a-b)(a^2-a*b+b^2),而一个素数的因子只有1和其本身,在加上(a^2-a*b+b^2)一定是大于1的,所以只 ...

  10. (十三)JSON的使用(下)

    (接上一章节) 4.2 使用ajax交互方式 使用ajax的转换思想        A:异步请求在页面中发起,也要在页面中接收数据并展现. B:ajax中的数据不能从作用域中获取,只能从respons ...