[webpack] 处理样式 (二)-编程知识

[webpack] 处理样式 (二)

文章目录

- - 1.介绍
  - 2.处理 Css 资源
  - - 2.1 导入包
    - 2.2 功能配置
    - 2.3 添加 Css 资源
  - 3.处理 Less 资源
  - - 3.1 导入包
    - 3.2 功能配置
    - 3.3 添加 Less 资源
  - 4.处理 Sass 和 Scss 资源
  - - 4.1 导入包
    - 4.2 配置
    - 4.3 添加 Sass 资源
    - 4.4 运行webpack
  - 5.处理 Styl 资源
  - - 5.1 导入包
    - 5.2 配置
    - 5.3 添加 Styl 资源
    - 5.4 运行指令

Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源。

1.介绍

Webpack 本身是不能识别样式资源的, 需要借助 Loader 来帮助 Webpack 解析样式资源。

2.处理 Css 资源

2.1 导入包

npm i css-loader style-loader -D

css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块。
style-loader: 会动态创建一个 Style 标签, 里面放置 Webpack 中 Css 模块内容。

此时样式就会以 Style 标签的形式在页面上生效

2.2 功能配置

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"],},],},plugins: [],mode: "development",
};

在这里插入图片描述

2.3 添加 Css 资源

在这里插入图片描述

src/css/index.css

.box1 {width: 100px;height: 100px;background-color: pink;
}

src/main.js

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

index.html

在这里插入图片描述

npx webpack

在这里插入图片描述

3.处理 Less 资源

3.1 导入包

npm i less-loader -D

less-loader: 负责将 Less 文件编译成 Css 文件。

3.2 功能配置

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"],},],},plugins: [],mode: "development",
};

3.3 添加 Less 资源

在这里插入图片描述

src/less/index.less

.box2 {width: 100px;height: 100px;background-color: deeppink;
}

main.js

在这里插入图片描述

index.html

在这里插入图片描述

npx webpack

在这里插入图片描述

4.处理 Sass 和 Scss 资源

4.1 导入包

npm i sass-loader sass -D

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

4.2 配置

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",
};

在这里插入图片描述

4.3 添加 Sass 资源

src/sass/index.sass

/* 可以省略大括号和分号 */
.box3width: 100pxheight: 100pxbackground-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>

4.4 运行webpack

npx webpack

在这里插入图片描述

5.处理 Styl 资源

5.1 导入包

npm i stylus-loader -D

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

5.2 配置

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",
};

5.3 添加 Styl 资源

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>