笔记:使用 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. Intellij IDEA的一些操作小技巧

    1.Presentation Mode 我们可以使用 Presentation Mode,将IDEA弄到最大,可以让你只关注一个类里面的代码,进行毫无干扰的 coding.可以使用Alt+v快捷键,弹 ...

  2. MFC sendmessage实现进程间通信

    用sendmessage实现进程间通信. 1.WM_COPYDATA实现进程间通信 实现方式是发送WM_COPYDATA消息. 发送程序: LRESULT copyDataResult; //copy ...

  3. 为红米Note 5 Pro编译Lineage OS 15.1的各种坑

    安装了ubuntu虚拟机,直接上网repo sync,网速特别慢,中间断了好多次,记得是3天吧,总算是下载成功了.中途还在淘宝上买过付费的VPN代理软件,有时候会打开代理来尝试,也是不太稳定.好歹第1 ...

  4. bzoj3600

    题解: 好像是什么替罪羊树 然后看了几个题解 然后就抄了一边 代码: #include<bits/stdc++.h> using namespace std; ; int n,m,rt,R ...

  5. python虚拟环境的搭建命令mkvirtualenv

    windows环境如果同时安装了python3和python2,那么无论在哪个版本安装了virtualenv和virtualenvwrapper-win 通过以下命令设置ptyhon版本路径,即可建立 ...

  6. iOS 开发经验总结

    iOS 开发经验总结http://www.cocoachina.com/ios/20170216/18699.html 1.cocoa pods 常用的framework 1 2 3 4 5 6 7 ...

  7. shell脚本实例一

    一. 什么是shell 脚本时一种解释性语言: shell脚本保存执行动作: 脚本判定命令的执行条件 脚本来实现动作的批量执行.二.如何创建 vim  test.sh     ##shell脚本一般都 ...

  8. 微信小程序之答题领券系统构建

    这个项目做了有一段时间了,客户需求反复更改,所以版本也是在不断迭代,下面简要说明一下这个系统的构建过程吧 系统功能: 1.基于商城系统开发的商品答题领券功能 2.首页商品列表页显示当前商品的答题状态 ...

  9. TF随笔-7

    求平均值的函数 reduce_mean axis为1表示求行 axis为0表示求列 >>> xxx=tf.constant([[1., 10.],[3.,30.]])>> ...

  10. python函数作用域

    python中函数作用域 在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = '肖亚飞' print('在change_ ...