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

    1.需要下载一个包

    npm i stylus-loader

    2.功能介绍

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

    3.配置：

    1. const path = require('path');//nodejs用来处理路径问题的模块
    2.  
    3. module.exports = {
    4.     /**入口 */
    5.     entry: './src/main.js',
    6.     /**输出 相对路径*/
    7.     output: {
    8.         /**文件输出路径 绝对路径*/
    9.         //__dirname 表示当前文件的文件夹目录
    10.         path: path.resolve(__dirname, 'dist'),
    11.         /**文件名 */
    12.         filename: 'dist.js'
    13.     },
    14.     /**加载器 */
    15.     module: {
    16.         rules: [
    17.             //loader的配置
    18.             {
    19.                 /**test 代表要检测的文件 */
    20.                 test: /\.css$/, //只检测.css文件
    21.                 use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
    22.             },
    23.             {
    24.                 test: /\.less$/,//只检测.less文件
    25.                 //loader:'xxx',loader只能使用一个loader，use可以使用多个loader
    26.                 use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
    27.             },
    28.             {
    29.                 test: /\.s[ac]ss$/,//只检测.sass文件
    30.                 use: ['style-loader', 'css-loader', 'sass-loader'],
    31.             },
    32.             {
    33.                 test: /\.styl$/,//只检测.stylus文件
    34.                 use: ['style-loader', 'css-loader', 'stylus-loader']
    35.             }
    36.         ]
    37.     },
    38.     /**插件 */
    39.     plugins: [
    40.         //plugin配置
    41.     ],
    42.     /**模式 */
    43.     mode: 'development'
    44. }

    在module的rules里新增一条规则

    4.新增stylus文件

    1. .box
    2.  width 100px
    3.  height 100px
    4.  background-color:brown

    在main.js中引入

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

    在html中使用box3样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>webpack</title>
    8. </head>
    9. <body>
    10.     <script src="../../dist/dist.js"></script>
    11.     <h1>hell webpack</h1>
    12.     <div class="red"></div>
    13.     <div class="box"></div>
    14.     <div class="box2"></div>
    15.     <div class="box3"></div>
    16. </body>
    17. </html>

    执行npx webpack打包

    打包成功

    查看html文件

  • 相关阅读:
    【服务器】无法进行ssh连接的问题逐一排查以及解决方法
    负载重组人骨形态发生蛋白2rhBMP-2/富血小板纤维蛋白PRF壳聚糖/丝胶蛋白复合水凝胶的制备方法
    reset函数的使用
    机器学习过程&四要素
    Mybatis的mapper.xml批量插入、修改sql
    Flutter: ListView or Column
    2023 年爆肝将近 20 万字讲解最新 JavaEE 全栈工程师基础教程（更新中）
    655. 输出二叉树
    【操作系统】内存管理（一）—— 内存管理的概述与总结
    mathtype符号显示不全的问题
  • 原文地址：https://blog.csdn.net/weixin_45636198/article/details/136645155