如何在vue中全局引入stylus文件的公共变量
新建 一个公共的stylus公共文件添加公共变量,如下:
修改下图圈出的文件:
具体的修改如下:
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
} // Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
var stylusOptions = {
import: [
path.join(__dirname, "../src/assets/css/public/var.styl"), // 全局变量文件 文件后缀名为.styl
]
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus',stylusOptions),
styl: generateLoaders('stylus',stylusOptions)
}
这里要特别注意文件后缀名是.styl而不是.stylus哦!
然后就可以在.stylus或者.styl文件(两种后缀名都是可以的,统一就好)里面使用var.styl里面定义的变量了:
最后重启刷新就可以看到效果啦
如何在vue中全局引入stylus文件的公共变量的更多相关文章
- vue中全局引入bootstrap.css
1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...
- vue中如何引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- Vue中ESlint配置文件.eslintrc文件
很久没有分享和更新过了 今天就给大家分享一篇 Vue中ESlint配置文件.eslintrc文件详解吧 ------------------------------------------------ ...
- Pycharm中 import 引入同级文件失败问题
Pycharm中 import 引入同级文件失败,如下所示: “This inspection detects names that should resolve but don't. Due to ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
随机推荐
- centos7修改root根目录
1.拷贝/root 原目录的东西到新目录中(包括.xxx文件) /abc 2.修改配置文件 vi /etc/passwd root:x:0:0:root:/root:/bin/bash ==> ...
- 2019.01.20 bzoj3784: 树上的路径(二分答案+点分治)
传送门 点分治好题. 题意简述:给一棵带边权的树,问所有路径中前mmm大的.m≤300000m\le300000m≤300000 思路: 网上有题解写了可以通过什么点分治序转化成超级钢琴那道题的做法蒟 ...
- 2018.11.06 洛谷P1099 树网的核(最短路+枚举)
传送门 之前看李煜东的书一直感觉是道神题. 然后发现这题数据范围只有300?300?300? 直接上floydfloydfloyd然后暴力就完了啊. 代码: #include<bits/stdc ...
- jq 某个时间段的倒计时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- matlab画无向图,基于坐标的无向图联系作者
%函数名netplot %使用方法输入请help netplot %无返回值 %函数只能处理无向图 %作者:tiandsp %最后修改: function netplot(A,flag) %调用方法输 ...
- 为WinEdt自定义XeLatex快捷键
没有彻底抛弃Windows很重要的一方面原因,WinEdt + Sumatra PDF对LaTeX支持的太好了(自动补全,反向搜索),而且当遇到复杂公式的时候,mathtype也能帮上大忙. 我一直用 ...
- linux ping命令
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...
- java如何编写下载功能
@RequestMapping("/downLoadFailRecord") public ModelAndView downLoadFailRecord( HttpServlet ...
- web-day10
第10章WEB10-requet&response篇 今日任务 登录系统后完成文件下载 商城系统注册功能. 教学导航 教学目标 掌握response设置响应头 掌握response重定向和转发 ...
- hdu 2688
这题,因为要统计之前有多少个数比当前的数小,所以我用的树状数组 基本代码就是这样,还是比较好想的,只不过我没想出来罢了 #include <iostream> #include <c ...