笔记:使用 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. linux修改系统时间时区

    修改时间: date -s "2017-08-10 17:00:00" clock -w 修改时区: 方法一: ln -sf /usr/share/zoneinfo/Asia/Sh ...

  2. 修改linux系统用户最大线程数限制

    linux系统对线程数量有个最大限制,当达到系统限制的最大线程数时使用账号密码ssh到系统时是无法登陆的,会报Write failed: Broken pipe,或者是shell request fa ...

  3. hdu4347The Closest M Points kdtree

    kdtree讲解: https://blog.csdn.net/qing101hua/article/details/53228668 https://blog.csdn.net/acdreamers ...

  4. 17.并发容器之ThreadLocal

    1. ThreadLocal的简介 在多线程编程中通常解决线程安全的问题我们会利用synchronzed或者lock控制线程对临界区资源的同步顺序从而解决线程安全的问题,但是这种加锁的方式会让未获取到 ...

  5. (2) iOS开发之UI处理-UILabel篇

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

  6. Qt5全局热键-QxtGlobalShortcut

    最近做一个项目需要注册全局热键,在网上搜索发现有个第三方库 libqxt 中给出一个比较好的跨平台的解决方案,就是 QxtGlobalShortcut. 但是编译过程中发现这个库用到的QAbstrac ...

  7. This function has none of DETERMINISTIC, NO SQL解决办法

    This function has none of DETERMINISTIC, NO SQL解决办法 创建存储过程时 出错信息: ERROR 1418 (HY000): This function ...

  8. Linux(CentOS 7) 新增或修改 SSH默认端口

    通过ssh连接到服务器,登录root用户 执行命令编辑sshd配置文件 vi /etc/ssh/sshd_config 找到这一行 # Port 去除#号,修改22 为你想要的端口 重启sshd服务 ...

  9. Flask数据库常见关系模板代码

    常见关系模板代码 以下罗列了使用关系型数据库中常见关系定义模板代码 一对多 示例场景: 用户与其发布的帖子(用户表与帖子表) 角色与所属于该角色的用户(角色表与多用户表) 示例代码 class Rol ...

  10. An error report file with more information is saved as hs_err_pid2756.log

    An error report file with more information is saved as hs_err_pid2756.log weblogic启服务时遇到的问题,重新部署都不行, ...