webpack 打包样式(3)

Posted 2023-04-08

参考技术A webpack 只能理解 javascript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中 loader 有两个属性：

本节要实现的功能：

rules执行顺序由右往左，由下往上。所以会先执行 sass-loader -> css-loader -> style-loader

将 欢迎来到瓦力博客 加一点样式，让文字的颜色变红，水平居中

在 webpack.config.js 文件中处理css文件规则写好后，我们还需要安装 style-loader 、 css-loader loader。安装方式如下。如果想要了解 style-loader :target="_blank"、 css-loader :target="_blank"

看到命令框输出的信息中包含 ./src/index.js 和 ./src/assets/css/index.css 就说明css样式被打包到了main.js文件中。接下来手动打开 dist/index.html 文件

在 assets 目录下面新增 sass 目录，然后在 sass 目录下新建一个 index.scss

将字体颜色变成白色，背景色变为蓝色。

在这里解释一下 importLoaders:2，当a.scss文件中有 @improt b.scss文件时，需要重新加载css-loader前两个loader插件，在这里就是sass-loader，因为执行顺序是由下往上，由右往左

在 assets 目录下面新增 less 目录，然后在 less 目录下新建一个 index.less

将字体颜色变黑，然后添加一个红色的边框

不管是写 css , sass , less , postCss 样式，在css3新特性下，我们是要添加浏览器厂商前缀的。如果没有浏览器厂商前缀，同一套样式不同浏览器展现的样式是不同的。之前写css都是手动添加，那样子实在是太繁琐了。

从小菜的截图中可以看到 css 、 less 、 scss 文件。css3新属性的浏览器厂商前缀已经添加上了。

webpack 样式模块打包深入学习

1. style-loader css-loader sass-loader 分别的作用

style-loader: 将所有的样式嵌入到dom的style属性当中。

css-loader: 将css当中的 @import 和 url(...) 解析成 import / require 引入

sass-loader: 将代码sass编译成css

2. webpack的执行顺序

配置的时候顺序不能乱写，需要遵从 style-loader!css-loader!sass-loader的顺序严格执行的。

但是有一点，webpack的loader执行顺序是从右到左的。

3. style-loader!css-loader!sass-loader 合起来的作用

首先将sass编译成css,然后将 css当中的 url(...)/@import 引入方式解析成 import/ require 在js当中引入，最后将代码到相应dom的style属性下面。