笔记:使用 stylus stylus-loader

安装 stylus Stylus-loader

cnpm i stylus stylus-loader --save

配置 webpack.config.js 加入 styl-loader

    module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg|)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}
]
}
]
}

编辑 stylus 文件

新建一个 test-stylus.styl

body
font-size 20px

导入到 index.js 中

import './assets/styles/test-stylus.styl'

打包

cnpm run build

笔记:使用 stylus stylus-loader的更多相关文章

  1. Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解webpack 5 如何高效处理CSS 资源.scss/sass 资源.l ...

  2. CSS预处器的对比——Sass、Less和Stylus

    预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...

  3. CSS预处理器的对比 — Sass、Less和Stylus

    本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...

  4. 在vue 中使用Stylus

    概述 什么是Stylus Stylus是一个CSS预处理器. 什么是CSS预处理器 关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass.LESS 和 Sty ...

  5. css预处理器:Sass LASS Stylus

    语法 Sass h1 { color: #0982C1; } h1 color: #0982c1 LESS h1 { color: #0982C1; } Stylus /* style.styl */ ...

  6. (转)预处器的对比——Sass、LESS和Stylus

    英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-sho ...

  7. stylus

    stylus介绍 是个什么鬼?对于开发来说,CSS的弱点在于静态化.我们需要一个真正能提高开发效率的工具, LESS , SASS 都在这方面做了一些贡献. Stylus 是一个CSS的预处理框架,2 ...

  8. VUE -- stylus入门使用方法

    sizes() 15px 10px sizes()[0] // => 15px stylus介绍 是个什么鬼?对于开发来说,CSS的弱点在于静态化.我们需要一个真正能提高开发效率的工具,LESS ...

  9. $stylus美化$

    一直在用洛谷 当然不一定是洛谷 其他的网站也可以用 比如说codeforces 还是决定要美化一波 首先去找一个插件 叫做 stylus stylus下载的很多 我不想过多说明. Google和QQ浏 ...

随机推荐

  1. SpringIOC源码分析总结

    大致的加载过程: spring ioc容器的加载,大体上经过以下几个过程: 资源文件定位.解析.注册.实例化 1.资源文件定位:主要发生在ApplicationContext中,由于applicati ...

  2. 1-22-shell脚本基本应用-实验手册

    脚本应用思路 1. 确定命令操作(设计并执行任务) 2. 编写Shell脚本(组织任务过程) 3. 设置计划任务(控制时间,调用任务脚本) ------------------------------ ...

  3. UVA-11374 Airport Express (dijkstra+枚举)

    题目大意:n个点,m条无向边,边权值为正,有k条特殊无向边,起止点和权值已知,求从起点到终点的边权值最小的路径,特殊边最多只能走一条. 题目分析:用两次dijkstra求出起点到任何一个点的最小权值, ...

  4. jsp获取绝对路径

    在JavaWeb开发中,常使用绝对路径的方式引入javaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法是: 一.使用${pageContext.request. ...

  5. 转载:left join和left semi join的联系和区别

    1.联系 他们都是 hive join 方式的一种,join on 属于 common join(shuffle join/reduce join),而 left semi join 则属于 map ...

  6. apache shiro整合spring(一)

    apache shiro整合spring 将shiro配置文件整合到spring体系中 方式一:直接在spring的配置文件中import shiro的配置文件 方式二:直接在web.xml中配置sh ...

  7. 【51nod-1396】还是01串

    给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...

  8. 一台服务器的IIS绑定多个域名

    等待十分钟: 在IIS上配置:

  9. Docker搭建独立服务器

    用Docker尝试搭建了一个Apache2服务器,整体安装很简单,但是从容器中退出后,Apache2服务器也就随之停止,网上有很多说可以通过docker run 加上-d参数可以使得服务器跑在后台,但 ...

  10. New Concept English three(19)

    27w/m 76words Kidnappers are rarely interested in Animals, but they recently took considerable inter ...