webpack处理样式资源
Posted 天界程序员
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack处理样式资源相关的知识,希望对你有一定的参考价值。
webpack 只能理解 javascript 和 JSON 文件,Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。样式资源文件:Css、Less、Sass、Scss、Styl
我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用官方文档找不到的话,可以从社区 Github 中搜索查询。
处理CSS资源
1、需要的loader
css-loader
: 负责将 Css 文件编译成 Webpack 能识别的模块style-loader
: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效
2、下载包到项目
npm i css-loader style-loader -D
3、配置loader
module:
rules: [
// 用来匹配 .css 结尾的文件
test: /\\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
,
],
,
注意:use 数组里面 Loader 执行顺序是从右到左,先加载的是css-loader最后才是style-loader。
处理less资源
1、需要的loader
-
less-loader
:负责将 Less 文件编译成 Css 文件 -
css-loader
: 负责将 Css 文件编译成 Webpack 能识别的模块 -
style-loader
: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效
2、下载包到项目
npm i less-loader -D
css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。
3、配置loader
module:
rules: [
// 用来匹配 .less 结尾的文件
test: /\\.less$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader", "less-loader"],
,
],
,
这里的loader执行顺序:less-loader ===> css-loader ===> style-loader
处理 Sass 和 Scss 资源
1、需要的loader
-
sass-loader
:负责将 Less 文件编译成 Css 文件 -
sass
:sass-loader
依赖 sass 进行编译 -
css-loader
: 负责将 Css 文件编译成 Webpack 能识别的模块 -
style-loader
: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效
2、下载包到项目
npm i sass-loader sass -D
css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。
3、配置loader
module:
rules: [
// 用来匹配 .sass/.scss 结尾的文件
test: /\\.s[ac]ss$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader", "sass-loader"],
,
],
,
这里的loader执行顺序:sass-loader ===> css-loader ===> style-loader
处理Styl资源
1、需要的loader
-
stylus-loader
:负责将 Styl 文件编译成 Css 文件 -
css-loader
: 负责将 Css 文件编译成 Webpack 能识别的模块 -
style-loader
: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效
2、下载包到项目
npm i stylus-loader -D
css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。
3、配置loader
module:
rules: [
// 用来匹配 .styl 结尾的文件
test: /\\.styl$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader", "stylus-loader"],
,
],
,
这里的loader执行顺序:stylus-loader ===> css-loader ===> style-loader
处理所有样式资源
处理所有样式资源只需要将上述loader全部下载并添加到配置文件即可。
const path = require("path");
module.exports =
entry: "./src/main.js",
output:
path: path.resolve(__dirname, "dist"),
filename: "main.js",
,
module:
rules: [
test: /\\.css$/,
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",
;
最后你可以创建你的样式资源文件,并引入main.js
中,然后执行npx webpack
到浏览器查看样式是否生效即可。
以上是关于webpack处理样式资源的主要内容,如果未能解决你的问题,请参考以下文章