笔记:使用 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. 数据挖掘之Python调用R包、函数、脚本

    Python中集成R :参考博客http://blog.csdn.net/weidelight/article/details/44946785

  2. URAL 1203 Scientific Conference 简单dp 难度:0

    http://acm.timus.ru/problem.aspx?space=1&num=1203 按照结束时间为主,开始时间为辅排序,那么对于任意结束时间t,在此之前结束的任务都已经被处理, ...

  3. MySQL Cluster --01

    [MySQL Cluster] MySQL Cluster 是MySQL 官方集群部署方案, 支持自动分片.读写扩展:通过实时备份冗余数据.适合于分布式计算环境的高实用.高冗余版本,是可用性最高的方案 ...

  4. 重置input checked

    <!-- 作者:duke 时间:2018-10-24 描述: 重置input 样式--> <!DOCTYPE HTML><html> <head> &l ...

  5. 【转】busybox分析——arp设置ARP缓存表中的mac地址

    [转]busybox分析——arp设置ARP缓存表中的mac地址 转自:http://blog.chinaunix.net/uid-26009923-id-5098083.html 1. 将arp缓存 ...

  6. The program environment for cypress cy8ckit-002

    customer use cypress ic to make sure the  wireless products, we are prepare to establish the environ ...

  7. 对map参数进行排序

    /**     * Map转换成url参数 by csl     *     * @param map     * @param isSort 是否排序     * @return     */   ...

  8. Unity3D查找丢失材质和脚本工具

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  9. Redis的高可用技术方案

    引言: redis是广为使用的缓存解决方案,本文将给出基于Sequential的高可用方案,自动进行主从的切换,在master节点down机之后,透明的进行切换. 主从节点的设置方案 设置主节点red ...

  10. Vim技能修炼教程(8) - 多窗口

    多窗口 如果一个vim只能开一个窗口,那肯定是有点low.尤其是写代码的时候,打开多个文件是经常的需求. 速成教程 横着切成两个 :split 文件名 上下切换窗口 Ctrl-W加上上下键,可以实现上 ...