Webpack学习：使用开发模式-处理 Styl 资源

安装前面已经安装好了

npm i stylus-loader -D

配置

  {test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");module.exports = {// 入口entry: "./src/main.js",// 相对路径和绝对路径都行// 输出output: {// 必须绝对路径// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "dist"),// filename: 输出文件名filename: "main.js",},// 加载器module: {//loader规则rules: [{test: /\.css$/i, // 用来匹配 .css 结尾的文件use: ["style-loader", //将js中css通过创建style标签添加到html中"css-loader" //该模块将css资源编译成commonjs的模块到js中],//use 数组里面 Loader 执行顺序是从右到左(从下到上)},{test: /\.less$/i, // 用来匹配 .less 结尾的文件//loader:"xxx"只能使用1个loaderuse: [//use可以使用多个loader// compiles Less to CSS'style-loader','css-loader','less-loader',//将less变成css文件],},{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},{test: /\.styl$/,use: ["style-loader","css-loader", "stylus-loader"],},],},// 插件plugins: [],// 模式mode: "development",// 开发模式};

引入

import "./stylus/index.styl";

显示

运行

> npx webpack

Webpack学习：使用开发模式-处理 Styl 资源相关推荐

webpack+react+es6开发模式
一.前言实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
Servlet学习-MVC开发模式
MVC模型: M:模型层(业务,dao,持久.) V:视图层 C:controller,控制器 1.业务逻辑代码和界面分离 2.把常用的代码(数据库连接和操作)封装到工具类数据库每张表要对应一个do ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
微信开发模式（php）
才开始学习微信开发模式和PHP,在此记录以供后阅. <?php /*** wechat php test*///define your token define( "TOKEN&quo ...
Webpack项目学习：开始搭建和react-cli（脚手架）-开发模式配置
配置配置配置文件初始化包 npm init -y >5个核心概念 // 入口entry: "./src/main.js",// 相对路径和绝对路径都行由于运行是在外面运行 ...
webpack 开发模式管理 Development
webpack 开发模式管理 Development GitHub 学习 Demo. 接下来将一些开发时的 webpack 配置. warnning : 本指南中的工具仅用于开发,请避免在生产中使用它 ...
react开发模式_通过开发带有精灵动画的游戏来学习高级React模式
react开发模式 by Pavel Vlasov 通过帕维尔·弗拉索夫(Pavel Vlasov) 通过开发带有精灵动画的游戏来学习高级React模式 (Learn advanced React p ...
面对 ESM 的开发模式，webpack 还有还手之力吗？(转载)
snowpack / vite 等基于 ESM 的构建工具出现,让项目的工程构建不再需要构建一个完整的 bundle.很多人都觉得我们不再需要打包工具的时代即将到来.借助浏览器 ESM 的能力,一些代 ...
node.js服务端笔记文档学会写接口，学习分类：path、包、模块化、fs、express、中间件、jwt、开发模式、cors。
node.js 学习笔记 node.js服务端笔记文档学会写接口,path.包.模块化.fs.express.中间件.JWT.开发模式.cors. gitee:代码接口笔记 1什么是node.js n ...

Webpack学习：使用开发模式-处理 Styl 资源

Webpack学习：使用开发模式-处理 Styl 资源相关推荐

最新文章

热门文章