笔记:使用 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. SPOJ-CLEANRBT-状压dp

    CLEANRBT - Cleaning Robot #dynamic-programming #bfs Here, we want to solve path planning for a mobil ...

  2. linux 使用dd命令清空文件

  3. centos7&redhat 之 firewalld 详细介绍配置

    firewalld和iptables的关系 firewalld自身并不具备防火墙的功能,而是和iptables一样需要通过内核的netfilter来实现,也就是说firewalld和iptables一 ...

  4. NetHogs 实时检测网络流量 转

    有很多适用于Linux系统的开源网络监视工具.比如说,你可以用命令iftop来检查带宽使用情况. netstat用来查看接口统计报告,还有top监控系统当前运行进程.但是如果你想要找一个能够按进程实时 ...

  5. ie下的bug之button

    场景描述: 现在页面设计是都喜欢自定义按钮样式,某日接收到页面发现在ie下有bug,上代码: <div> <button><span><a href=&quo ...

  6. js常用正则表达式,滚蛋吧!你们测试组bug,让你挑

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. lombok --- 常用注解解析

    @Data@Getter @Setter @ToString@Cleanup@NonNull@Builder@EqualsAndHashCode      

  8. css引用第三方字体库

    对应的CSS文件中如下方式进行字体库的引用: @font-face { font-family: '造字工房情书'; src: url('../fonts/MFQingShu_Noncommercia ...

  9. StringUtils.isEmpty和StringUtils.isBlank的区别

    两个方法都是判断字符是否为空的.前者是要求没有任何字符,即str==null 或 str.length()==0:后者要求是空白字符,即无意义字符.其实isBlank判断的空字符是包括了isEmpty ...

  10. 《Effective Java》读书笔记(二)之对于所有对象都通用的方法

    第八条 在改写equals的时候请遵守通用约定 一般以下几种情况,不适宜覆盖equals方法 1.类的每个实例本质上都是唯一的,对于代表活动实体而不是值的类确实如此,例如Thread. 2.不关心类是 ...