如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板中引用一些函数啥的;所以夏敏介绍怎么全局引用。
一:先更改脚手架项目中的build -- webpack.base.conf.js 去让项目能够正常使用stylus,具体更改如下:
先安装 npm i style-loader stylus stylus-loader css-loader -S
module.exports = { 。。。。。 resolve: {
extensions: ['.js', '.vue', '.json', '.styl'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.styl$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'stylus-loader' }],
include: []
}, 。。。。。。
}
二:打开vue-cli脚手架项目里面的 build --- utils.js 文件,具体位置如下:
然后对这个文件进行下面的修改,来全局引入想要引入的全局使用的stylus文件:
exports.cssLoaders = function(options) { ........... //原来的部分不用修改的,省略号代替 var stylusOptions = {
import: [
path.join(__dirname, "../src/common/stylus/mixin.styl") // variables.styl全局变量文件
],
paths: [
path.join(__dirname, "../src/common/"),
path.join(__dirname, "../")
]
} //上面都是新加的内容,我这里是要引入 ../src/common/stylus/mixin.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) //这个也是需要新加上的
} }
这样就可以在所有的vue模块中去使用这个stylus文件里面的样式和函数,方法等
注意,需要先安装 npm i stylus-loader --save-dev 和 npm i stylus --save-dev
如何在 vue 2.0+ 中引入全局的stylus文件,且能正常的更多相关文章
- 如何在Cocos2D 1.0 中掩饰一个精灵(一)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 原帖来自Ray Wunderlich写的精彩的文章 How To ...
- C# 5.0中引入了async 和 await
C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. 看个例子: public class MyClass { public MyClass() { Displa ...
- vue2.0中引入UEditor的一些坑。。。。
开发后台系统的时候,富文本编辑器肯定是必不可少的,然后呢~在天朝当然要属百度编辑器(UEditor)最成熟了,功能全面,文档齐全(相对),ui优美(...,对于程序员来说)等等许多方面(MMP,还不是 ...
- C# 9.0中引入的新特性init和record的使用思考
写在前面 .NET 5.0已经发布,C# 9.0也为我们带来了许多新特性,其中最让我印象深刻的就是init和record type,很多文章已经把这两个新特性讨论的差不多了,本文不再详细讨论,而是通过 ...
- 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- Vue3.0中引入地图(谷歌+高德+腾讯+百度)
1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...
- 如何在web.xml文件中引入其他的xml文件(拆分web.xml)
转载自:http://www.blogjava.net/jiangjf/archive/2009/04/09/264685.html 最近在做一个Servlet+javaBean的项目,服务器用的是t ...
- 如何在Cocos2D 1.0 中掩饰一个精灵(六)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 掩饰一个精灵:实现代码 打开HelloWorldLayer.m并 ...
随机推荐
- leetcode 108. Convert Sorted Array to Binary Search Tree 、109. Convert Sorted List to Binary Search Tree
108. Convert Sorted Array to Binary Search Tree 这个题使用二分查找,主要要注意边界条件. 如果left > right,就返回NULL.每次更新的 ...
- Android 摇一摇监听实现
package com.loaderman.androiddemo; import android.content.Context; import android.hardware.Sensor; i ...
- ASP程序中调用Now()总显示“上午”和“下午”,如何解决?
ASP程序中调用Now()总显示这样的格式:“2007-4-20 下午 06:06:38”,我要的正确格式为“2007-4-20 18:06:38”,我已经通过控制面板==>区域和语言选项==& ...
- Oracle查看表结构的方法【我】
Oracle查看表结构的方法 方法一: 在命令窗口下输入 DESC table_name; 回车 方法二: 在sql窗口下 SELECT DBMS_METADATA.GET_ ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_13-SpringSecurityOauth2研究-JWT研究-生成JWT令牌&验证JWT令牌
生成jwt需要用私钥来签名.在Auth认证服务下创建测试类 创建密钥工厂,构造函数需要的参数 获取私钥 有了私钥就可以生成JWT令牌 使用jwtHelper是spring security里面的类 e ...
- Mysql字段修饰符(约束)
(1).null和not null not null不可以插入null,但可以插入空值. 数值型.字符型.日期型都可以插入null,但只有字符型可以插入空值. 使用方法如下: mysql> cr ...
- Win10使用Tex Live和VS Code和Latex Workshop插件编写Latex文档(未完成版本)
首先取Tex Live官网下载安装包:https://www.tug.org/texlive/acquire-netinstall.html 我下载的是 http://mirror.ctan.org/ ...
- Hadoop概念学习系列之Hadoop、Spark学习路线
1 Java基础: 视频方面: 推荐<毕向东JAVA基础视频教程>.学习hadoop不需要过度的深入,java学习到javase,在Java虚拟机的内存管理.以及多线程. ...
- 【OpenGL学习】 四种绘制直线的算法
我是用MFC框架进行测试的,由于本人也没有专门系统学习MFC框架,代码若有不足之处,请指出. 一,先来一个最简单的DDA算法 DDA算法全称为数值微分法,基于微分方程来绘制直线. ①推导微分方程如下: ...
- 波特词干(Porter Streamming)提取算法无代码单纯理解
最近写东西提到这个算法,要看一下,结果网上都是直接根据代码解释,对于我这种菜鸟在刚开始看一个算法的时候真心不想直接看代码学.奈何都是各种语言的代码,么得办法.先走了一遍,有了大致的了解,翻译成自己的话 ...