使用webpack处理scss、sass、styl资源

1.下载scss、sass资源

下载依赖包

npm i sass-loader sass -D

在这里一定要注意是下载两个依赖包

功能介绍

sass-loader：负责将 Sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

配置：


const path = require("path");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

添加Sass资源

src/sass/index.sass


/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

src/sass/index.scss


.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

src/main.js


import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
 
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html


<!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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

最后再用

npx webpack

2.处理styl资源

下载依赖包

npm i stylus-loader -D

功能介绍

stylus-loader：负责将 Styl 文件编译成 Css 文件

配置


const path = require("path");
 
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

添加资源

src/styl/index.styl


/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

src/main.js


import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
 
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html


<!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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

最后再

npx webpack

打开 index.html 页面查看效果

相关阅读:
Python 算法高级篇：递归与迭代的比较与应用
如何用Python语音合成，以及文字转语音~
uniapp - 微信小程序 - 自定义底部tabbar
万得凯通过注册：年营收7.5亿为钟兴富及其连襟家族企业
【LeetCode】按要求补齐数组 [H]（贪心）
计算机毕业设计springboot+vue基本微信小程序的校园跑腿平台 uniapp
当Map的值为NULL
K8S中的ingress
Dubbo—Admin 整体架构与安装步骤
基于SpringCloud的面试刷题系统，项目经验统统搞定

原文地址：https://blog.csdn.net/m0_68997646/article/details/127626539