vue 公共样式处理_全局styl文件

ue2.0中,在main.js文件里引入了index.styl文件,在其他组件中样式不生效。 只能通过在当前组件里去引用.styl文件才有效果,这是什么情况。 如果页面很多了,那不是每个页面都要引入这个.styl文件吗?有什么方式,只需要在入口文件引入一次,其它页面不需要引入了吗?

在 build utils exports.cssLoaders 下  配置

var stylusOptions = {
import: [
path.join(__dirname, "../src/components/common/stylus/index.styl"), // variables.styl全局变量文件
],
paths: [
path.join(__dirname, "../src/components/common/"),
path.join(__dirname, "../"),
],
}

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less‘),
sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
scss: generateLoaders(‘sass‘),
stylus: generateLoaders(‘stylus‘, stylusOptions),
styl: generateLoaders(‘stylus‘, stylusOptions),
}

然后在index.styl中import 其他styl文件。。。这样就一次性导入了,不用一个个页面导入

原文地址:https://www.cnblogs.com/liuzhouyuan/p/9293838.html

时间: 2024-08-01 11:38:22

vue 公共样式处理_全局styl文件的相关文章

vue 中 scoped的用法 以及css文件引入问题的补充

自:https://blog.csdn.net/weixin_39941429/article/details/80254724 下面再说说VUE中scoped的编译原理吧.具体可以参考vue-loader 所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css.参考scoped内复写组件样式 css-loader对i

struts2国际化---配置国际化全局资源文件并输出国际化资源信息

我们首先学习怎么配置国际化全局资源文件,并输出资源文件信息 1.首先struts2项目搭建完成后,我们在src目录下,即struts2.xml同级目录下创建资源文件,资源文件的名称格式为: XXX_语言_国家.properties XXX:资源文件名称,可以随意定义 语言.国家:必须是java所支持的语言和国家,例如: 中国大陆:语言   zh   国家  CN 美国:语言  en   国家 US 所以我们可以这么取名: 例如:itheima_zh_CN.properties itheima_e

.Net常用技巧_目录与文件操作

using System; using System.Collections.Generic; using System.Text; using System.IO; namespace MyTool { public class FileOperator { /// <summary> /// 返回指定目录下所有文件信息 /// </summary> /// <param name="strDirectory">目录字符串</param>

.Net常用技巧_操作xml文件教程(插入节点、修改、删除)

已知有一个XML文件(bookstore.xml)如下:     <?xml   version="1.0"   encoding="gb2312"?>     <bookstore>         <book   genre="fantasy"   ISBN="2-3631-4">             <title>Oberon's   Legacy</title&

最土团购系统全局核心文件app.php介绍

最土团购系统是国内比较常见的团购程序,在国内团购系统份额中所占比例还是比较大的.下面分析一下它的全局核心文件app.php,看看能不能找到一些干货,顺便也籍此开始深入了解下这个开源的团购系统. 注释都写到代码里了,程序用到的自定义函数k7娱乐城也单独地在后面列出,应该是比较好懂的了. view source print? 01 <?php 02 require_once(dirname(__FILE__). '/include/application.php'); 03   04 // 如果ma

[terry笔记]11gR2_DataGuard搭建_拷贝数据文件

11gR2搭建dataguard环境: 自己做的实验,后续按照rman模式搭建.主备切换.模式调整等实验会陆续发上来. primary: OS:oel 6.4 database:11.2.0.4.0 192.168.100.131 hostname=node4 ORACLE_SID=good ORACLE_HOME=/u01/product/11.2.0 db_unique_name=good standby: OS:oel 6.4 database:11.2.0.4.0 192.168.100

CSS覆盖公共样式中的某个属性

CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

vue.js样式绑定

vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. class 属性绑定 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>style of vue<

npm的.npmrc文件在哪里?缓存及全局包文件在什么位置?

npm的.npmrc文件在哪里?缓存及全局包文件在什么位置? npm作为node开发过程中的必备工具,长期使用之后,您可能会想:这些全局安装的node包都放在硬盘里面的哪个地方?配置文件.npmrc文件在哪里?node包的缓存位置在哪里?本文里,苏南大叔就讲述npm相关的这些位置信息.如果您需要深入理解node相关的代码逻辑,本篇内容就是你需要的基础知识教程. 如何快捷修改.npmrc配置文件? .npmrc文件,就是npm的配置文件所在位置.当然,寻找这个文件的目的,多数是为了修改.npmrc