webpack5零基础入门-5使用webpack处理stylus文件

1.需要下载一个包

npm i stylus-loader

2.功能介绍

stylus-loader:负责将stylus文件编译成css文件

3.配置:

const path = require('path');//nodejs用来处理路径问题的模块

module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        /**文件名 */
        filename: 'dist.js'
    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader,use可以使用多个loader
                use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.s[ac]ss$/,//只检测.sass文件
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.styl$/,//只检测.stylus文件
                use: ['style-loader', 'css-loader', 'stylus-loader']
            }
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
    ],
    /**模式 */
    mode: 'development'
}

在module的rules里新增一条规则

4.新增stylus文件

.box
 width 100px
 height 100px
 background-color:brown

在main.js中引入

import sum from "./js/sum";
import count from "./js/count";
//要想webpack打包资源,必须引入该资源
import "./css/file.css"
import "./css/box.less"
import "./css/box2.scss"
import "./css/box3.styl"
console.log(count(1, 2));
console.log(sum(1, 2, 3, 4, 5))

在html中使用box3样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <script src="../../dist/dist.js"></script>
    <h1>hell webpack</h1>
    <div class="red"></div>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

执行npx webpack打包

打包成功

查看html文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/468798.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(vue)Module Error (from ./node_modules/eslint-loader/index.js)

(vue)Module Error (from ./node_modules/eslint-loader/index.js) 方法1&#xff1a;直接关闭eslint // vue.config.js module.exports {lintOnSave: false, //关闭eslint语法检查...... }方法2&#xff1a; 参考&#xff1a;解决参考 解决参考&#xff1a;如何修复vue-cli…

香港科技大学(广州)先进材料学域可持续能源与环境学域智能制造学域博士招生宣讲会——北京专场(暨全额奖学金政策)

三个学域代表教授亲临现场&#xff0c;面对面答疑解惑助攻申请&#xff01;可带简历现场咨询和面试&#xff01; &#x1f4b0;一经录取&#xff0c;享全额奖学金1.5万/月&#xff01; 报名链接&#xff1a; https://www.wjx.top/vm/wF2Mant.aspx# 地点&#xff1a;中关村皇冠…

【进阶五】Python实现SDVRP(需求拆分)常见求解算法——差分进化算法(DE)

基于python语言&#xff0c;采用经典差分进化算法&#xff08;DE&#xff09;对 需求拆分车辆路径规划问题&#xff08;SDVRP&#xff09; 进行求解。 目录 往期优质资源1. 适用场景2. 代码调整3. 求解结果4. 代码片段参考 往期优质资源 经过一年多的创作&#xff0c;目前已经成…

Transformer的前世今生 day01(预训练、统计语言模型)

预训练 在相似任务中&#xff0c;由于神经网络模型的浅层是通用的&#xff0c;如下图&#xff1a; 所以当我们的数据集不够大&#xff0c;不能产生性能良好的模型时&#xff0c;可以尝试让模型B在用模型A的浅层基础上&#xff0c;深层的部分自己生成参数&#xff0c;减小数据集…

【NLP学习记录】One-Hot编码

1. One-Hot编码概念 one-hot编码的基本思想是将每个类别映射到一个向量&#xff0c;其中只有一个元素的值为1&#xff0c;其余元素的值为0。这样&#xff0c;每个类别之间相互独立&#xff0c;不存在顺序或距离关系。 举例&#xff1a;对于三个类别的情况&#xff0c;可以使用…

【LIMS】微服务

目录 一、服务解决方案-Spring Cloud Alibaba1.1选用原因&#xff08;基于Spring Cloud Alibaba的试用场景&#xff09;1.2 核心组件使用前期规划 部署 nacos部署 mino使用JavaFreemarker模板引擎&#xff0c;根据XML模板文件生成Word文档使用JavaFlowable 工作流引擎前端 -vue…

信息发布系统

特色功能 画布功能---可任意拖动各控件的播放位置及大小&#xff0c;可任意选择屏幕背景色或添加背景图 同步联屏---毫秒级同步功能 视频切换无黑屏 触摸查询系统 会议预定系统 终端显示-会议综合屏 终端显示-会议预定屏 终端显示-移动端 广告发布系统 硬件产品-智能终端 硬件…

Codeforces Round 933(Div.3) A~F

A.Rudolf and the Ticket&#xff08;暴力&#xff09; 题意&#xff1a; 鲁道夫要去拜访伯纳德&#xff0c;他决定乘坐地铁去找他。车票可以在接受两个硬币的机器上购买&#xff0c;这两个硬币的总和不超过 k k k。 鲁道夫有两个装硬币的口袋。左边口袋里有 n n n枚面值为 …

有问有答开源问答平台网站源码系统 带完整的安装代码包以及搭建教程

在当前的信息爆炸时代&#xff0c;用户对于高效、精准地获取信息的需求日益强烈。问答平台以其独特的互动形式&#xff0c;能够为用户提供更加直接、实用的信息解答。然而&#xff0c;市场上的问答平台大多存在功能单一、定制化程度低等问题&#xff0c;难以满足用户多样化的需…

抖音无水印视频关键词批量下载|视频下载工具

抖音无水印视频关键词批量下载操作说明 我们根据自己的需要开发了抖音视频批量下载工具&#xff0c;现在市面上的视频无水印工具只能通过单个视频链接进行提取&#xff0c;太不方便 所以我们延伸出了 不仅可以通过单个视频链接进行提取也可通过关键词进行视频搜索 进行批量和有…

tsn交换机应用场景

TSN交换机应用场景 随着工业互联网的快速发展&#xff0c;越来越多的工业设备需要进行互联互通&#xff0c;并实现实时通信和数据传输。而传统的以太网交换机在满足工业互联网需求方面存在一定的局限性&#xff0c;因此&#xff0c;TSN&#xff08;时钟同步网络&#xff09;交换…

【数字图像处理系列】显示图像

显示图像 在 MATLAB 桌面上图像一般使用函数imshow来显示,该函数的基本语法为imshow(f,[])imshow(f,[])将变量 1ow设置为数组f的最小值,将变量high设置为数组的最大值 imshow(f,[low high])imshow(f,[low high])会将所有小于或等于1ow的值都显示为黑色,所有大于或等于high…

【测试开发学习历程】MySQL条件查询与通配符 + MySQL函数运算(上)

前言&#xff1a; 18日08&#xff1a;56&#xff0c;总要先写完明天的博客&#xff0c;才能安心准备今天或者明天的学习。 半夜爬起来写博客真的好辛苦&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 回归…

语音识别:whisper部署服务器,可远程访问,实时语音转文字(全部代码和详细部署步骤)

Whisper是OpenAI于2022年发布的一个开源深度学习模型&#xff0c;专门用于语音识别任务。它能够将音频转换成文字&#xff0c;支持多种语言的识别&#xff0c;包括但不限于英语、中文、西班牙语等。Whisper模型的特点是它在多种不同的音频条件下&#xff08;如不同的背景噪声水…

html--蝴蝶

<!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>蝴蝶飞舞</title> <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.cs…

基于GEC6818的QT开发之——通过不同按键控制DHT11模块的数据采集与动态显示

基于GEC6818的QT开发之——通过不同按键控制DHT11模块的数据采集与动态显示 使用环境: ubantu16 QT5.7 开发板GEC6818 实现要求&#xff1a; 利用A53按键1、按键2与温湿度传感器完成QT界面动态显示温湿度记录&#xff0c;并指定温湿度记录超过指定范围&#xff0c;进行报警&…

自主可控|工业机箱/控制器助力打造高性能、超稳定测试系统!

产品介绍 PXIeC-7318GN3L1-21DBM 是一款拥有出色性能和创新功能的18槽PXI Express机箱&#xff0c;具备1个system插槽和17个hybrid外设插槽&#xff0c;采用hybrid插槽设计&#xff0c;可以安装Compact PCI、PXI、Compact PCl Express和PXI Express模组到任何外设插槽内&…

PONAR电比例控制阀驱动器

控制PONAR WADOWICE比例方向阀&#xff0c;比例流量阀&#xff0c;比例压力阀&#xff0c;比例插装阀控制器放大器放大板&#xff0c;控制阀系列&#xff1a;WDUD10、WDUD6、WZCDE4、WZRS6、WZCR6、3WZCDE6、WZCPE10、WZPPE10、WZPSE20、WZPPE20、WZPSE10、WZPSE6、WZPPE10、WZ…

用Python直接获取Word文档页数、字数、段落数、节数等信息

计算 Word 文档的页数、字数等信息是出版、学术和内容管理等领域的一项基本任务。准确的页数和字数对于评估文档长度、估算印刷成本、分析文本复杂性以及确保符合格式化指南至关重要。逐个预览文档查看相关信息是非常麻烦的事情&#xff0c;我们可以在不预览文档的情况下&#…

产品说明书VS产品规格书:有什么区别

产品说明书和产品规格书是两个不同的文档&#xff0c;虽然它们都涉及到产品的描述和细节&#xff0c;但侧重点和用途有所不同。 | 内容侧重点不同 产品说明书更侧重于向用户解释产品的使用方法和操作细节。它就像是一本用户手册&#xff0c;告诉用户如何安装、操作、维护和保养…