继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

6、webpack从0到1-less、sass、postcss

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

还是延续上节的内容,webpack如何处理less、sass这种预编译样式文件。
本节的内容主要是postcss的运用,postcss很强大,我们小试牛刀用它来实现在不同的浏览器中为我们自动添加前缀如-webkit--moz-等等以做兼容。
git仓库:webpack-demo

1、处理sass

  • 继续沿用上一章的代码放置新建文件夹chapter6下。
  • 首先,我们需要安装处理sass文件相关的loader->webpack之sass-loader
$ cd chapter6
$ npm install sass-loader node-sass --save-dev
  • 然后我们需要在webpack.config.js中配置它。
...
  module: {
    rules: [
      // 处理sass
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader" // 将 Sass 编译成 CSS,默认使用 Node Sass
        ]
      },
    ]
  }
...

2、新建

  • 进入到项目中在src/styles下新建content.scss文件,用来测试。
 webpack-demo/chapter6
  ...
  |- /src
    |- /assets
    |- /styles
       |- header.css
+      |- content.scss
    |- logo.js
    |- header.js
    |- content.js
    |- footer.js
    |- index.js
    |- header.css
  |- index.html
  |- package.json
  |- webpack.config.js
  ...  
  • content.js中随便输入几行`sass语法:
body {
  .content {
    background: green;
  }
}
  • src/content.js中给这个块级元素添加一个.content类名。
export function createContent() {
   const div = document.createElement("div");
   div.innerText = "主体内容";
+  div.classList.add("content");
   document.body.appendChild(div);
}
  • src/index.js模块中引入这个content.scss文件。
import { createLogo } from "./logo";
import { createHeader } from "./header";
import { createContent } from "./content";
import { createFooter } from "./footer";

import "./styles/header.css";
+ import "./styles/content.scss";

createLogo();
createHeader();
createContent();
createFooter();
  • 然后我们npm run build打包后再打开dist/index.html就可以看到内容块的新增的绿色背景样式了。这样就证明我们的sass处理打包就成功了。

3、处理less

  • 过程与上同理,在src/styles目录下新建用来测试的相关footer.less文件并在src/index.js中引入它用来测试看效果,就不浪费篇幅了,具体可以看仓库代码。

  • 安装并配置less-loader,然后打包刷新浏览器就可以看到效果了。

$ npm install less less-loader --save-dev
...
  module: {
    rules: [
      ...
      // 处理less
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      ...
    ]
  }
...

4、安装postcss

  • 现在我们有这么一个常见的需求场景,比如说当我们使用css3新特性的时候,我们需要根据不同的浏览器自动加上浏览器前缀如-webkit--moz-等等以做兼容。怎么处理?先动手用一下,后面再来小结,先安装postcss:
$ npm i postcss-loader --save-dev
  • 然后我们还需要安装能给我们css3自动添加浏览器前缀的插件autoprefixer
$ npm install autoprefixer --save-dev
  • src/styles/content.scss中写点css3语法用来测试。
.header {
   background: green;
+  box-shadow: 0 0 20px green;
}

4、配置postcss

  • chapter6目录下新建一个postcss.config.js文件并配置添加这个刚刚安装的autoprefixer插件。
 webpack-demo/chapter6
  ...
  |- /src
  |- index.html
  |- package.json
+ |- postcss.config.js
  |- webpack.config.js
  ...  
+  module.exports = {
+    plugins: {
+      "autoprefixer": {}
+    }
+  };
  • webpack.config.js中配置这个post-loader。我这里以应用scss文件为例,其它样式文件也是一样的配置,详见源码。(这个loader放置的位置顺序要注意一下)
...
  module: {
    rules: [
      // 处理sass
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
+         "postcss-loader", // 因为这里处理的是css文件,所以要放在sass-loader的上面
          "sass-loader"
        ]
      },
    ]
  }
...
  • 到了这一步,基本配置就完成了,但是还有一个东西一定要记得设置,不然压根没效果。进入到package.json中,我们要设置所支持的浏览器列表,切记!!!(这一步很重要,我就是忘记设置这一步,导致一直没效果,找了很久的问题!!!)
{
...
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
...
}
  • 然后我们输入命令打包,在浏览器中打开dist/index.html就可以看到自动为我们添加好了前缀了。

4、小结

  • Ok,小结一下,对于lesssass的处理很简单,不过是上一节处理css文件的一个延伸罢了,不多说,主要说下postcss
  • 对于postcss这个怎么用的你应该亲自实践过了,并且有了一个基本的认识。
  • 首先我想说,你可以把postcss也理解为一个??生态吧,就像是webpack可以有很多的loader来给它赋能babel也有许多插件来给它赋能
  • postcss也同样有许多来给它赋能(官网上就列举了许多),如上面我们用到的autoprefixer插件,另外还有我们一般用postcss-px-to-viewport插件来实现使用vw实现移动端适配移动端适配等等,
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP