笔记:使用 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. 转:kafka入门

    一.基本概念 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafk ...

  2. C#连接Oracle数据库查询数据

    C#连接Oracle数据库可以实现许多我们需要的功能,下面介绍的是C#连接Oracle数据库查询数据的方法,如果您对C#连接Oracle数据库方面感兴趣的话,不妨一看. using System; u ...

  3. C# 打开TXT文件读取内容

    控制关键字,有些关键字发短信发不出来,比如(金融)需要转化为(金.融) 要求:读取敏感字的,并且替换掉 using : using System.Collections.Generic;using S ...

  4. String类运算符重载,自己实现

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  5. form表单序列化之后追加字段

    方法是在{}中添加字段 key-value 一一对应,如下: var data = $.param({'state': state}) + '&' + $('#desProForm').ser ...

  6. Python面向对象 --- 新旧式类、私有方法、类属性和类方法、静态方法

    一.Python面向对象中的新旧式类 1)新式类(推荐使用):在定义类时,类后边括号里要继承基类(object).在python3.x中若没有指定父类,会默认使用的是object作为基类:在pytho ...

  7. 实现一个简单的lazyman

    function lazyman(name) { return new lazyman.fn.init(name); } lazyman.fn = lazyman.prototype = { cons ...

  8. CS231n课程笔记翻译3:线性分类笔记

    译者注:本文智能单元首发,译自斯坦福CS231n课程笔记Linear Classification Note,课程教师Andrej Karpathy授权翻译.本篇教程由杜客翻译完成,巩子嘉和堃堃进行校 ...

  9. KAFKA 0.11 RHEL6.5安装

    KAFKA简介 KAFKA是一款分布式消息发布和订阅的系统. 官网:http://kafka.apache.org/ 1.下载KAFKA及JDK KAFKA下载地址: http://kafka.apa ...

  10. SpreadJS 在 Angular2 中支持绑定哪些属性?

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...