笔记:使用 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. (2) iOS开发之UI处理-UILabel篇

    我们经常要根据内容去动态计算控件的高度,比如一个UILabel控件,常常要显示多行内容,并且计算出总高度,如果每个UILabel要多行显示,都要写这么一段代码是非常痛苦的,看代码如下:     我想大 ...

  2. 闲话__stdcall, __cdecl, __fastcall出现的历史背景以及各自解决的问题

    可以认为最先由微软搞出来了__stdcall, 其实就是和WINAPI的声明是一样的,入栈顺序是从右到左,函数返回时,会进行出栈操作. PASCAL语言是非常古老的编程语言,在C语言之前,因此在当时的 ...

  3. python __new__和__init__

    转载:http://www.cnblogs.com/tuzkee/p/3540293.html 1 2 3 4 5 6 7 8 class A(object):     def __init__(se ...

  4. ASP.NET MVC 路由系统类

    RouteData public class RouteData { private RouteValueDictionary _dataTokens; private IRouteHandler _ ...

  5. Windows 下 左Ctrl和Caps交换

    将以下文本存为后缀为.reg文件,运行并重启即可 左Ctrl和Caps交换 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTE ...

  6. nodejs之log4js日志记录模块简单配置使用

    在我的一个node express项目中,使用了log4js来生成日志并且保存到文件里,生成的文件如下: 文件名字叫:access.log 如果在配置log4js的时候允许了同时存在多个备份log文件 ...

  7. 学习写domready

    原视频参考http://www.imooc.com/learn/488 --博主个人尝试学习写的-- /** * Created by ty on 2016/1/3. */ //尝试自己写domrea ...

  8. 对于get方法是否需要synchronized修饰

    具体用法没有总结,只是说明一个用法而已,对于以前个人理解出现的偏差 [问题描述] 对于一个计数功能的实现,获取值的方法是否需要加锁? [以前理解] 我只需要在进行累加的方法上进行加锁即可,这样保证其可 ...

  9. JWT的详细简介

    什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准.该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场 ...

  10. socket函数sendto与send的区别

    C:socket相关的sendto()函数简介 http://blog.csdn.net/flytiger_ouc/article/details/19634279 文中提到SOCK_DGRAM, S ...